Как вы нацеливаетесь на видимые элементы в списке 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?
}