過濾角材料2表的特定列

Question

在我的角度應用程序中，有一個帶有文本框的html頁面，該頁面將用於過濾下面的網格。 到目前為止，搜索遍及所有列，我想將其限制為僅ID和Name 。 以下是搜索文本框html：

 <mat-form-field class="example-full-width" shouldPlaceholderFloat="false">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Please enter Name or ID number.">

            <!-- <input placeholder="Please enter Name or ID number." matInput #input (keyup)='searchElements(input.value)'> -->
        </mat-form-field>

下面是物料表代碼：

   <mat-table #table [dataSource]="dataSource" matSort fxFlex="60" class="">

                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Name </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.name}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="cdate">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Creation Date </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.cdate | date:'mediumDate'}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="createdby">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Created By </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.createdby}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> ID </mat-header-cell>
                    <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.id}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="status">
                    <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Status </mat-header-cell>
                    <mat-cell actQuestionFunction style="padding-left:10px" [config]="{ lob : { Id: element.id ,'true': 'func1', 'false':' func2'} }" *matCellDef="let element"> {{element.sqldbinfo.status}} </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row [routerLink]="['/overview', row.id]" (click)="setCurrent(row)" [queryParams]="{ name: row.name, Id: row.id }"  [ngClass]="{'hidden': (row.status == 'Submitted' && showSubmitted == false), 'submitted': row.status == 'Submitted'}" *matRowDef="let row; columns: displayedColumns  " ></mat-row>
            </mat-table>

TypeScript文件中的keyup事件如下所示

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

這是下面的ts文件

    import { Component, ViewChild, OnInit, AfterViewInit  } from 
                     '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { CamsService } from '../services/cams.service';
import { ActauthService } from '../actauth.service';
import { LocalDataService } from '../services/local-data.service';
import { ActService } from '../services/act.service';
import { ActModalService } from '../act-modal/act-modal-service.service';

@Component({
  selector: 'app-camslist',
  templateUrl: './camslist.component.html',
  styleUrls: ['./camslist.component.less']
})
export class CamslistComponent implements OnInit {

  displayedColumns = ['name', 'cdate', 'createdby', 'camsid', 'status'];
  dataSource;
  StatusText: Array<string>;
  SubmittedButtonShowHide: Boolean;
  constructor(
              private camsService: CamsService,
              private auth: ActauthService,
              private localDataService: LocalDataService,
              private actService: ActService,
              private modalService: ActModalService) {

  }
  @ViewChild(MatSort) sort: MatSort;
  showSubmitted: Boolean = false;
  ngOnInit() {
    this.auth.getMyLogon().subscribe(
      res => {
        res.EmployeeId = 29007154;
        this.camsService.all(res).subscribe(
          cams => {
            if (cams.length === 0) {
              this.modalService.openNoCamsIdMsgModal();
            } else {
                  this.dataSource = new MatTableDataSource(cams);
                  setTimeout(() => this.dataSource.sort = this.sort);
           }
          });
      });
  }

  // ngAfterViewInit() {
  //   setTimeout(() => this.dataSource.sort = this.sort);

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

    this.dataSource.filterPredicate = function(data, filter: string): 
 boolean {
      return data.name.toLowerCase().includes(filter) || 
     data.camsid.toLowerCase().includes(filter);

    };
  }
  toggleSubmitted() {
    this.showSubmitted = !this.showSubmitted;
  }

    export interface Element {
     name: string;
    cdate: string;
     createdby: string;
       id: number;
     status: string;

}`

Answer 1

在未應用applyFilter函數的情況下，在要更新數據源的位置添加applyFilter 。

ngOnInit() {
    this.auth.getMyLogon().subscribe(
      res => {
        res.EmployeeId = 29007154;
        this.camsService.all(res).subscribe(
          cams => {
            if (cams.length === 0) {
              this.modalService.openNoCamsIdMsgModal();
            } else {
                  this.dataSource = new MatTableDataSource(cams);
                  setTimeout(() => this.dataSource.sort = this.sort);
                  //======= HERE =====//
                  this.dataSource.filterPredicate = function(data, filter: string): boolean {
                     return data.name.toLowerCase().includes(filter) ||  data.camsid.toLowerCase().includes(filter);
                  };
           }
          });
    });
}