排序 function 不适用于通用 Angular 材料表

Question

我使用 Material Table 创建了自己的通用组件，以便在我的应用程序中使用它。 所以问题在于排序 - 它根本不起作用。 列 header 旁边的箭头显示但没有任何反应。 我发现它可能是ngIf over <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" 

分叉的 Stackblitz