角材2は動的に列を生成します

Question

角度材料を使用してng-tableとwantoを使用して列を動的に生成しています。 次の例にはhtmlテンプレートが含まれています。これは、「静的に」定義された表テンプレートの実例です。私はすべての列定義をコメントのようなコードに置き換えたいと思います。

<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私は、* ngForを使用しようとするとcolumnDefs JSON

に基づいている世代のアレイ["userId", "userName", "progress", "color"]ようですこのエラーが表示されます：

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) 

動的に列を生成できますか？

はEDIT：

Plunker example

Answer 1

私はそれがcdkColumnDefが値として'column.columnDef'文字列を取得することを意味します

cdkColumnDef='column.columnDef' 

ディレクティブにcdkColumnDef入力を渡したときにミスをしたと思います。

私はあなただったら、私はそれを書くでしょうとして：

[cdkColumnDef]="column.columnDef" 

か、以下のオプションがあなたのためにも使用できます。

cdkColumnDef="{{column.columnDef}}" 

または

bind-cdkColumnDef="column.columnDef" 

Plunker Example