Question

您是否知道是否可以在 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>

Answer 1

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

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

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

这基本上就是你所拥有的。您将迭代列列表以标记列定义，然后添加您想要的任何静态列。

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

<md-row>

Answer 2

这是大家都在寻找的东西

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

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

2 个答案: