Question

您如何定位ngFor列表中的可见项目

我有一张数据表。每行都有一个复选框，可以选中该行上的批量操作。可以使用自定义管道将各种过滤器机制应用于ngFor来过滤该表。有一个标题行，其中有一个复选框可以选择全部。当前，如果我单击它，它将选择表格中的所有项目，而与过滤器无关。我希望只能定位可见的项目。

我在checkAll（）处理程序中遇到了“ hack”，在该处理程序中我遍历整个列表并重新应用过滤器，但希望有一个更优雅/集成的解决方案。

在我看来

<table>
   <tr>
     <th><input type="checkbox" [(ngModel)]="allCheck" (click)="selectAll()"></th>
     <th>Name</th>
   </tr>
   <tr *ngFor="let client of clients|filterTable:searchString:incomplete">
     <td><td><input type="checkbox" [(ngModel)]="clientCheck[store.id]"></td>
     <td><input [(ngModel)]="client.Name"></td>
</table>

在我的管道中（对于名称为空的记录，过滤器不完整-我们要按那些过滤，然后仅选择那些过滤器）。

transform(items: any[], searchString:string, showIncomplete:boolean): any {
  if (!items) return [];
  if (!showIncomplete && !searchString) return items;
  searchString = searchString.toLowerCase();
  return items.filter(value => {
    if (showIncomplete && value.Name) return false;
    return value.Name.toLowerCase().indexOf(searchString);
  })
}

在我的控制器中

ngOnInit() {
   // assume svc is the injected clientService
   this.svc.getClients()
    .subscribe(clients => this.clients = clients);
}

selectAll() {
   // Is there a way to get access to the list of items here
   // that are actually being displayed?
}

Angular：如何在ngFor中定位已过滤的项目

0 个答案: