排序函数不适用于通用 Angular Material Table

Question

我使用 Material Table 创建了自己的通用组件，以便在我的应用程序中使用它。所以问题在于排序 - 它根本不起作用。 header 列旁边的箭头显示但没有任何反应。我发现 ngIf 比 <table 可能有问题但是..我没有它（仅在 table 内部但这些不是问题）。也许有人可以帮我解决这个问题？

组件：

@ViewChild(MatSort, {static: true}) sort: MatSort;
@Input() data: any[] = [];
@Input() columns: GridColumn[] = [];
displayedColumns: string[] = [];
dataSource: MatTableDataSource<any>;

ngOnInit() {
for (const column of this.columns) {
  this.displayedColumns.push(column.id);
}

this.dataSource = new MatTableDataSource<any>(this.data);
}

ngAfterViewInit() {
this.dataSource.sort = this.sort;
}

getValue(object: any, path: string) {
return getNestedValue(object, path);
}

和模板：

<table class="w-100" mat-table [dataSource]="data" matSort>
 <ng-container *ngFor="let column of columns">

  <ng-container *ngIf="!column.content" cdkColumnDef="{{column.id}}">
   <th cdk-header-cell *cdkHeaderCellDef mat-sort-header>{{column.label | translate}}</th>
   <td cdk-cell class="position-relative" *cdkCellDef="let row">{{row[column.id]}}</td>
  </ng-container>

  <ng-container *ngIf="column.content" cdkColumnDef="{{column.id}}">
   <th cdk-header-cell *cdkHeaderCellDef>{{column.label | translate}}</th>
   <td cdk-cell class="position-relative" *cdkCellDef="let row">
    <ng-container [ngTemplateOutlet]="column.content"
                  [ngTemplateOutletContext]="{record: row, value: column.field ? getValue(row, column.field) : null}">
    </ng-container>
   </td>
  </ng-container>

 </ng-container>

 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

编辑： Stackblitz：https://stackblitz.com/edit/angular-b9cdqt

Answer 1

这是因为您的示例中没有反应流。

您没有连接到 MatTableDataSource，因为您将普通数组传递给 dataSource 输入属性。

快速修复应该是：

[dataSource]="dataSource"

Forked Stackblitz

排序函数不适用于通用 Angular Material Table

Sorting function not working with generic Angular Material Table

html

javascript

angular-material

angular

angular-material-table