javascript - 如何获取 Angular 中可见元素的连续索引并忽略隐藏元素 *ngFor 的索引？

Question

我有 2 个 Angular 组件，分别用于显示已批准药房和新药房的列表。我只有一组药房，我想根据药房对象的状态(即是否批准)字段显示批准的药房列表。状态字段的类型为 bool 值。如果状态字段为 true，则药房对象将显示在批准的药房列表中，否则它将被隐藏。问题是我想获取可见元素的连续索引并避免对隐藏元素进行索引元素。批准药房.html

 <tr  *ngFor="let pharmacy of newPharmacys;let i=index" >
        <ng-container *ngIf="pharmacy.status==false">
        <td (click)=navigateToPharmacy(pharmacy)>{{i+1}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.createdOn}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.name}}</td>
        <td (click)=navigateToPharmacy(pharmacy) >{{pharmacy.location}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.email}}</td>
        <td (click)=navigateToPharmacy(pharmacy)>{{pharmacy.contact}}</td>
        <td (click)=navigateToPharmacy(pharmacy)><button type="button" class="btn btn-square btn-block btn-sm btn-primary" (click)="deleteFromDisabled(pharmacy)" (click)="addToEnabled(pharmacy)">approve</button></td>
        <td><label class="toggle-switch arya-3d toggle-primary">
            <input type="checkbox" class="toggle-input">
            <span class="toggle-slider"></span>
            </label>
        </td>
        </ng-container>
      </tr>

这里我想避免对隐藏元素建立索引。如何实现这一点？

Answer 1

我认为在模板内进行操作不是一个好的决定。模板用于显示内容，我们应该避免在模板(HTML)内进行数据操作。

如果您在组件类中过滤数据集并仅显示所需的数据，那就更好了。这样您就可以有效地执行操作。如果您将来想执行更多操作，它也将是可扩展的。

我在这里为您创建了一个 stackblitz 实例 - https://stackblitz.com/edit/angular-nhlfqm