选择角材料表中的所有过滤值

问题描述

我已经实现了全选到我的角度材质表的全选，我需要，当单击全选时，仅选择过滤的元素并将其推送到selectedDevices数组。我试图根据ngModel ='valueToFilter'的值自己过滤dataSource的值。我试图仅按一个键的值进行过滤，但是我需要按所有键值进行过滤。这就是我正在尝试的

我的html

  <mat-form-field class="filterField">
              <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" 
             [(ngModel)]='valueToFilter'>
            </mat-form-field>

 <table mat-table [dataSource]="dataSource" matSort class=" mat-elevation-z8"
              (matSortChange)="storeSort($event)" fxFlex="100">

<ng-container matColumnDef="checkbox">
                <th mat-header-cell *matHeaderCellDef>
                  <mat-checkbox (change)="$event ? masterToggle() : null;"
                    [checked]="selection.hasValue() && isAllSelected()"
                    
                    [indeterminate]="selection.hasValue() && !isAllSelected() && masterIndeterminate" [aria-label]="checkboxLabel()"
                    >
                  </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let element">
                  <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(element) : null; 
                    markAsSelected(element)"
                    [checked]="isDevicSelected(element._id)" [aria-label]="checkboxLabel(element)"
                    [(ngModel)]="checkboxes[element._id]" (ngModelChange)="onSelectedChange(element._id)">
                  </mat-checkbox>
                </td>
              </ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let element; columns: displayedColumns;">
              </tr>
            </table>

我的控制所有选择的主开关

 masterToggle(): void {
        if (this.isAllSelected()) {
            this.deselectDevices();
            this.selection.clear();
        } else if (!this.isAllSelected()) {
            if( this.valueToFilter.trim().toLowerCase() !== '' ) {
               const rows = this.dataSource.data.filter(r => r.tagProvisioned.trim().toLowerCase());  // here I want to filer the values of my dataSource  according to the value of the input in order to tag as selected



            }
            this.selectDevices();
            this.dataSource.data.forEach((row) =>
            this.selection.select(row));
          
    }

我的服务，其中的selectdevices（）方法映射所有设备并推送ID

import { Injectable } from '@angular/core';
import { Subject,BehaviorSubject } from 'rxjs';


@Injectable({
    providedIn: 'root',})
export class ProvisionedService {
    onSelectedDevicesChanged: BehaviorSubject<any>;
}

 constructor(
       
    ) {
        this.onSelectedDevicesChanged = new BehaviorSubject([]);
        
    }

 public selectDevices(filterParameter?,filterValue?): void {
        this.selectedDevices = [];
        // If there is no filter,select all contacts
        if (
            filterParameter === undefined ||
            filterValue === undefined
        ) {
            this.selectedDevices = [];
            this.devices.map((device) => {
                this.selectedDevices.push(device._id);
            });
        }
        this.onSelectedDevicesChanged.next(this.selectedDevices);
      
    }

解决方法

DataSource 有一个名为 filteredData 的属性，它只是过滤结果的数组。

您可以使用 this.dataSource.filteredData 代替 this.dataSource.data

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