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>

已导入： MatTable模块 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 =新的MatTableDataSource（this.listPatientStay）;

Answer 3

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

我现在将解决该分页问题;）

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

3 个答案: