Angular中Material表如何實現Filter？

Question

.HTML：

如何在這個組件中實現過濾器，因為我已經用擴展表實現了它，但我的過濾器不起作用。

    <mat-dialog-content style="width: 63rem; overflow: initial;">       
      <div class="searchField">
        <mat-form-field appearance="standard">
          <mat-label>Filter</mat-label>
          <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Tele" #input>
        </mat-form-field>
      </div>  
     
    </mat-dialog-content>

.TS:

    getProductList() {
        this.commonservice.getProdList().subscribe((response: any) => {
          console.log('Response from API is ', response);
          if (response) {
            this.productInfo = response;
            this.dataSource = this.productInfo;
            console.log('Product Info ', this.productInfo);
          }
        }, (error) => {
          console.log('Error is ', error);
        });
      }

    applyFilter(event: Event) {
        const filterValue = (event.target as HTMLInputElement).value;
        this.dataSource.filter = filterValue.trim().toLocaleLowerCase();
        console.log('filtered data ', this.dataSource.filter);
      }

Answer 1

假設 dataSource 是一個數組

this.dataSource = this.dataSource.filter((d)=>d === filterValue.trim().toLocaleLowerCase());