在Angular Material表(mat-table)中混合静态和动态列 [英] Mixing static and dynamic columns in Angular Material table (mat-table)

问题描述

您是否知道是否可以在 mat-table 中混合使用动态列和静态列?我正在使用它来显示用户数据，但是我需要另一列来显示有关用户的不同操作按钮.简单地添加另一个 ng-container 不起作用，因为displayedColumns中没有列定义，但是当我添加它时，出现重复错误".

Do any of you know if it's possible to mix dynamic and static columns in mat-table? I'm using it for displaying user data, but i need another column that will show different action buttons regarding the user. Simply adding another ng-container doesn't work since there's no column definition in displayedColumns, but when I add it I'm getting "duplicate error".

<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>

推荐答案

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

Sure, you just need to separate displayedColumns from your dynamic columns array.

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

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

这基本上就是您所拥有的.您将遍历列列表以标记出列定义，然后添加所需的任何静态列.

This is basically what you have. You'll iterate over a list of columns to stamp out column definitions, and then add whatever static one(s) you want.

然后，您可以将displayedColumns-<md-header-row>和<md-row>所使用的-设置为带有静态列的列的列表.

Then you can set displayedColumns - as used by <md-header-row> and <md-row> - to that list of columns with your static column(s) concatenated.

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

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

这篇关于在Angular Material表(mat-table)中混合静态和动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！