角度material2動態生成列

我正在使用角度材質ng-table並想要動態生成列。以下示例包含html模板。這是「靜態」定義的表格模板的工作示例。我想用註釋中的代碼替換所有列表定義。角度material2動態生成列

<md-table #table [dataSource]="dataSource"> 
<ng-container cdkColumnDef="userId"> 
    <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row['userId']}} </md-cell> 
    </ng-container> 

    <ng-container cdkColumnDef="progress"> 
    <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row['progress']}}% </md-cell> 
    </ng-container> 

    <ng-container cdkColumnDef="userName"> 
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row['userName']}} </md-cell> 
    </ng-container> 

    <ng-container cdkColumnDef="color"> 
    <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
    <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row['color']}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 

<!-- <ng-container 
    *ngFor='let column of tableOptions.columnDefs' 
    cdkColumnDef='column.columnDef'> 
    <md-header-cell *cdkHeaderCellDef> {{column.headName}} </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row[column.columnDef]}} </md-cell> 
</ng-container> -->

columnDefs JSON看起來像這樣：

columnDefs: [ 
    { 
     columnDef: 'userId', 
     headName: 'ID' 
    }, 
    { 
     columnDef: 'userName', 
     headName: 'Name' 
    }, 
    { 
     columnDef: 'progress', 
     headName: 'Progress' 
    }, 
    { 
     columnDef: 'color', 
     headName: 'Color' 
    } 
    ]

可變displayedColumns從報頭是如陣列["userId", "userName", "progress", "color"]當我嘗試使用該生成是基於columnDefs JSON

* ngFor，我得到這個錯誤：

TableComponent.html:24 
ERROR Error: cdk-table: Could not find column with id "userId". 
    at getTableUnknownColumnError (cdk.es5.js:1780) 
    at cdk.es5.js:2111 
    at Array.map (<anonymous>) 
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._getHeaderCellTemplatesForRow (cdk.es5.js:2108) 
    at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._renderHeaderRow (cdk.es5.js:2016) 
    at SafeSubscriber._next (cdk.es5.js:1952) 
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238) 
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185) 
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) 
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)

是否可以動態生成列？

編輯：

Plunker example

來源

2017-08-11 TomP

是的，這是可能的。 –

我發現這個https://github.com/angular/material2/pull/5545 ...它似乎並沒有可能在當前版本：/ – TomP

問題已解決，但尚未發佈，我們將有等待我猜..看到這個參考：https://github.com/angular/material2/issues/6159 –

我認爲你犯的錯誤時，被路過cdkColumnDef輸入指令

cdkColumnDef='column.columnDef'

這意味着cdkColumnDef將得到'column.columnDef'字符串值。

如果我是你，我會寫爲：

[cdkColumnDef]="column.columnDef"

或以下的選項也爲您提供：

cdkColumnDef="{{column.columnDef}}"

或

bind-cdkColumnDef="column.columnDef"

Plunker Example

來源

2017-08-11 14:20:54 yurzui

角度material2動態生成列

回答

相關問題