angular - 如何在 isAllselected 函数的数据源中仅获取过滤后的数据，即。 Angular 7 中的复选框列表函数 "isAllSelected"

Question

我有一个带有所有/行选择复选框和过滤功能的垫表，我正在数据源上应用过滤器，并且我想从此数据源检索所有过滤后的数据。

过滤器已正确应用，在我的垫子表中，过滤后的数据仅显示过滤后的项目，当时，我正在选择有效的行项，但当我想在垫子标题中“全选”复选框时，过滤的项目行在前端被选择，但在我通过调试器检查时，在选定的行数组中，所有行都被选择，但所需的过滤数据行不在数据源中。如何解决这个问题？如果有人现在将示例 URL 放在评论中。

这是一些代码:

<mat-form-field appearance="outline">
    <mat-label>Search</mat-label>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix style="font-size: 16px;">search</mat-icon>
</mat-form-field>

<table mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null"   [checked]="selection.hasValue() && isAllSelected()"
                 [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()"
                     (change)="$event ? selection.toggle(row) : null"
                     [checked]="selection.isSelected(row)">
            </mat-checkbox>
        </td>
   </ng-container>

   <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef ><b>S.No.</b></th>
       <td mat-cell *matCellDef="let element; let i=index">{{i+1}}</td>
   </ng-container>

   <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef  mat-sort-header="name">
           <b>Office Name</b>
       </th>
       <td mat-cell *matCellDef="let element"> {{element.name }} </td>
   </ng-container>

   <ng-container matColumnDef="contactPerson">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="contactPerson"><b>Contact Person</b></th>
       <td mat-cell *matCellDef="let element"> {{element.contactPerson}} </td>
   </ng-container>

   <ng-container matColumnDef="phone">
       <th mat-header-cell *matHeaderCellDef mat-sort-header="phone"><b>Mobile No</b></th>
       <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
   </ng-container>

TS代码:

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
}

isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
}

masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
}

Answer 1

这似乎是一篇旧文章，但如果其他人需要解决方案，这就是我解决它的方法。 在您的 UI 中发送点击事件:

<mat-checkbox (change)="$event ? masterToggle($event.checked) : null"  [checked]="selection.hasValue() && isAllSelected()"
                 [indeterminate]="selection.hasValue() && !isAllSelected()">  </mat-checkbox>

并且您的后端使用过滤后的数据进行选择:

masterToggle(event: boolean) {
   this.selection.clear();
    
   if(event){
      this.dataSource.filteredData.forEach(row => this.selection.select(row));
   }
}