在 Angular Material 表（mat-table）中混合静态和动态列答案

【问题标题】：Mixing static and dynamic columns in Angular Material table (mat-table)在 Angular Material 表（mat-table）中混合静态和动态列
【发布时间】：2018-03-25 11:30:53
【问题描述】：

你们知道是否可以在 mat-table 中混合使用动态列和静态列吗？我使用它来显示用户数据，但我需要另一列来显示有关用户的不同操作按钮。简单地添加另一个 ng-container 是行不通的，因为displayedColumns 中没有列定义，但是当我添加它时，我得到了“重复错误”。

<div class="example-container mat-elevation-z8">
<div class="example-header" layout="column" flex="100">
    <md-form-field floatPlaceholder="never">
      <input mdInput #filter placeholder="Filter users">
    </md-form-field>
    <span class="fill-space"></span>
    <button align="right center" md-raised-button color="primary" (click)="clearFilter()">Clear</button>
  </div>
<md-table *ngIf="users && displayedColumns" #table [dataSource]="dataSource">

  <ng-container *ngFor="let set of displayedColumns" [mdColumnDef]="set">
    <md-header-cell *mdHeaderCellDef> {{set}} </md-header-cell>
    <md-cell *mdCellDef="let element"> {{getValue(set, element)}} </md-cell>
  </ng-container>

  <ng-container mdColumnDef="akcje">
    <md-header-cell *mdHeaderCellDef> Akcje </md-header-cell>
    <md-cell *mdCellDef="let element"> asdf </md-cell>
  </ng-container>  <------ this doesn't show another column, when added to displayedColums, produces error

  <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
  <md-row [ngClass]="{'active-user' : current && element.Id == current.Id}" *mdRowDef="let element; let row; columns: displayedColumns;" (click)="gotoUser(element)"></md-row>
</md-table>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

当然，您只需要将 displayedColumns 与动态列数组分开即可。

<!-- Generic column definition -->
<ng-container *ngFor="let column of columns" [matColumnDef]="...">
  ...
</ng-container>

<!-- Special extra column -->
<ng-container matColumnDef="myExtraColumn">
  ...
</ng-container>

这基本上就是你所拥有的。您将遍历列列表以删除列定义，然后添加您想要的任何静态定义。

然后，您可以将 displayedColumns - 由 <md-header-row> 和 <md-row> 使用 - 设置为连接静态列的列列表。

/** Table columns */
columns = [
  ...,
  ...,
  ...,
];

/** List of columns to display in which order */
displayedColumns = this.columns.concat(['myExtraColumn']);

【讨论】：

这基本上就是我正在做的 - 问题是，当我添加一个新列时（使用推送，也许这就是问题？）角度抛出一个错误，说有重复的列定义
concat 应该修复它，因为它不会像 push 那样改变数组
最重要的一点是你使用了两个不同的数组。如果您查看我的原始答案，其中之一 (columns) 会删除动态列定义。另一个，displayedColumns 是在标题行和行中使用的列列表。在您的图像中，它表明您同时使用displayedColumns。
是的，没注意到 - 现在一切正常！非常感谢！

【解决方案2】：

这是你们都在寻找的东西

displayedColumns = this.columns.map(x => x.name).concat(['actions']);

【讨论】：

只需添加.concat(['actions']);