垫子表-过滤器:不过滤

时间:2019-08-16 10:50:31

标签: angular mat-table

我有一个带过滤器的垫子桌子。他们过滤不过滤。每当我使用过滤器时,FilteredData为空。

代码非常简单,我了解您已将过滤器应用于数据源。 我只是看不出问题出在哪里...

.html:

<mat-form-field id="table-filter">

 <mat-label >Filter by</mat-label>
 <input matInput  (keyup)="applyFilter($event.target.value)" >
</mat-form-field>

<table mat-table [dataSource]="dataSource">
 <ng-container matColumnDef="functionName">
  <th class="table-header" mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> 
    {{element.functionStatus.functionName}}
  </td>
 </ng-container>
 ...

.ts:

export class ServerDetailComponent implements OnInit {
  @Input() serverSummary: ServiceOverview;
  @Input() functions: FunctionList[];

  dataSource: any;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

  constructor(private ref: ChangeDetectorRef) { }

  ngOnInit() {
    this.initializeTable();
  }

  initializeTable(): void {
    this.dataSource =  new MatTableDataSource<FunctionList>(this.functions);
    this.ref.detectChanges();
    this.dataSource.paginator = this.paginator;
    this.dataSource.paginator.length = this.functions.length;
  }

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

}

数据源中的数据:

(2) [{…}, {…}]
 0:
  functionStatus: {instanceCode: 1, functionID: 21, functionName: "AddPet", 
  status: "Disabled"}
  hourProcessing: null
  minuteProcessing: null
  todayProcessing: null
  upTime: null
  __proto__: Object

数据源中的数据:

MatTableDataSource {_renderData: BehaviorSubject, ...}
 data: Array(2) // Here we have the dataSource data. (shown above).
 filter: "a"
 filterPredicate: ƒ (data, filter)
 filteredData: []

0 个答案:

没有答案