Angular: как нацелиться на отфильтрованные элементы в ngFor - PullRequest
0 голосов
/ 01 мая 2019

Как вы нацеливаетесь на видимые элементы в списке ngFor

У меня есть таблица данных.В каждой строке есть флажок, который можно выбрать для массовой операции в этой строке.Таблица может быть отфильтрована с помощью различных механизмов фильтрации, которые применяются к ngFor с использованием пользовательского канала.Есть строка заголовка с флажком, чтобы выбрать все.В настоящее время, если я нажимаю, он выбирает все элементы в таблице независимо от фильтра.Я хотел бы иметь возможность нацеливаться только на видимые элементы.

У меня есть «хак» в обработчике checkAll (), где я перебираю полный список и повторно применяю фильтры, но надеялся на более элегантный /интегрированное решение.

На мой взгляд

<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?
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...