角材料 - 垫表 - 排序和过滤不起作用？

Question

我对角材料的垫子有疑问。 我无法让排序和过滤器工作。 （我想我完全喜欢文档..）

这是我的代码：

我的组件：

   listPatientsStay: PatientStay[] = [
        {lastName: 'lastname1', firstName: 'firstname1', sex: 'f', birthDate: '1990-01-01'},
        {lastName: 'lastname2', firstName: 'firstname2', sex: 'm', birthDate: '1990-01-01'},
        {lastName: 'lastname3', firstName: 'firstname3', sex: 'f', birthDate: '1990-01-01'}
      ];
    displayedColumns: string[] = ['lastName', 'firstName', 'sex', 'birthDate'];
    dataSource;
    @ViewChild(MatSort) sort: MatSort;

    ngOnInit() {
      this.dataSource = new MatTableDataSource<PatientStay>(this.listPatientsStay);
      this.dataSource.sort = this.sort;
    }

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

我的模板：

<mat-form-field class="half-width">
          <input matInput (keyup)="applyFilter($event.target.value)"  placeholder="Filter">
</mat-form-field>

 <mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="lastName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Lastname</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.lastName}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="firstName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Firstname</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.firstName}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="sex">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Sex</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.sex}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="birthDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Birthdate</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.birthDate | date: 'dd.MM.yyyy'}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"
                 (click)="onRowClicked(row)"></mat-row>

 </mat-table>

已导入： 垫表模块 MatSortModule

有 0 个错误，但它只是不过滤也不排序。

感谢您的帮助..

Answer 1

这是一个简单的拼写错误：

参数是“this.listPatientsStay”，但属性名为“listPatientStay”。 ngOnInit 方法应如下所示：

ngOnInit() {
    this.dataSource = new MatTableDataSource<PatientStay>(this.listPatientStay);
    this.dataSource.sort = this.sort;
}

在 Stackblitz 上结帐：https://stackblitz.com/edit/angular-hrdv2z

一般来说，问题 Mat-table Sorting Demo not Working 解释了为什么必须包含 MatSortModule。

Answer 2

纠正拼写错误。添加这个 --> this.dataSource = new MatTableDataSource(this.listPatientStay);

Answer 3

我发现了问题。 当我评论代码的分页部分时它可以工作（过滤和排序） 感谢那些试图帮助我的人

我现在将解决分页问题；）