角度material2テーブルの静的列と動的列の混合

Question

md-tableに動的列と静的列を混在させることができますか？私はユーザーデータを表示するためにそれを使用していますが、私は別のアクションボタンを表示する別の列が必要です。 'displayedColumns'に列定義がないので、別のng-containerを追加するだけで動作しませんが、追加すると重複エラーが発生します。

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

これは基本的にあなたが持っているものです。列のリストを繰り返して列の定義を切り抜き、必要な静的なものを追加します。

<md-header-row>と<md-row>で使用されるdisplayedColumnsを、静的な列が連結されている列の一覧に設定できます。

私がやっている、基本的だ

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

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