Как получить только отфильтрованные данные в источнике данных функции isAllselected ie. функция списка флажков "isAllSelected" в angular 7 - PullRequest
Новая
       4

Как получить только отфильтрованные данные в источнике данных функции isAllselected ie. функция списка флажков "isAllSelected" в angular 7

0 голосов
/ 13 марта 2020

У меня есть таблица соответствия с флажком all / row select и функцией фильтра, я применяю фильтр к источнику данных и хочу получить все отфильтрованные данные из этого источника данных.

Фильтр настроен правильно Применимо, в моей таблице матов отфильтрованные данные отображают только отфильтрованный элемент, в то время я выбираю мудрый элемент строки, который работает, но когда я хочу установить флажок «выбрать все» в заголовке матов, отфильтрованные строки элементов выбираются на передняя сторона, но в то время как я проверяю через отладчик, в выбранном массиве строк все строки выбраны, но требуемые строки отфильтрованных данных не находятся в источнике данных. Как решить эту проблему? Если кто-нибудь сейчас поместит пример 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));
}
...