mat-table 动态创建列与静态更改表外观

Question

抱歉，如果这个问题很琐碎，我对 Angular 和 Web UI Kingdom 很陌生

我目前正在查看这个示例项目：https ://github.com/marinantonio/angular-mat-table-crud

我正在替换列的创建方式（从静态到动态），并且表布局变成了难以阅读的内容。我无法理解这是如何/为什么发生的。我创建专栏的方式有何不同？但是，最重要的是，我该如何解决它？

这是我所拥有的：

组件.html：

<ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
  <td mat-cell *matCellDef="let row"> {{row[column.name]}} </td>
</ng-container>

组件.ts

columns: Array<any> = [
    { name: 'id',         label: 'ID',         cell: (element: any) => `${element.id}` },
    { name: 'title',      label: 'Title',      cell: (element: any) => `${element.title}` },
    { name: 'state',      label: 'State',      cell: (element: any) => `${element.state}` },
    { name: 'url',        label: 'Url',        cell: (element: any) => `${element.url}`},
    { name: 'created_at', label: 'Created at', cell: (element: any) => `${element.created_at}`},
    { name: 'updated_at', label: 'Updated at', cell: (element: any) => `${element.updated_at}`},
]
// displayedColumns = ['id', 'title', 'state', 'url', 'created_at', 'updated_at', 'actions'];
displayedColumns = this.columns.map(x => x.name).concat(['actions']);

我没有碰components.css

Answer 1

该解决方案适用于 Angular 6+

<ng-container *ngFor="let i = index; let column of columnsToDisplay" 
    matColumnDef="{{column}}">
    <th mat-header-cell *matHeaderCellDef> {{column | titlecase}} </th>
    <td mat-cell *matCellDef="let element">
       <span *ngIf="column !== 'action'">{{element[column]}}</span>
        <span *ngIf="column == 'action'">
          <button mat-icon-button (click)="deleteRowData(element)" 
            color="primary">
            <mat-icon>delete</mat-icon>
          </button>
        </span>
    </td> 
</ng-container>

Answer 2

我找到了解决办法！！！

使用 cdkColumnDef 和 cdkHeaderCellDef 代替 matColumnDef 和 mat-h​​eader-cell

<ng-container *ngFor="let column of columns; let colIndex = index" [cdkColumnDef]="column.name">
    <mat-header-cell *cdkHeaderCellDef>{{ column.label }}</mat-header-cell>
    <mat-cell *cdkCellDef="let row">{{ row[column.name] }}</mat-cell>
  </ng-container>