角2動的データテーブル動的テーブル

Question

私は、角2データテーブル（https://material.angular.io/components/table/overview）の行を動的に追加しようとしています。 表示する列（ "meta.attributes"）を私に提供するサービス（ "ListService"）があり、そこからデータを取得できます。

私は後で表示される列を変更した場合、私はデータソースをロードした後、問題が、あるとしてmeta.attributes配列は、（その行がHTMLに存在しなければならない）のエントリを取得し、それは私に、このエラーを与える：

Error: cdk-table: Could not find column with id "id". 

ヘッダーが指定された行を見つけることができないように見えます。それを修正するための任意のアイデア？

の.htmlファイル：

<md-table #table [dataSource]="dataSource" mdSort> 
    <ng-container *ngFor="let attr of meta.attributes"> 

    <ng-container [cdkColumnDef]="attr.name"> 
     <md-header-cell *cdkHeaderCellDef md-sort-header>{{attr.label}}</md-header-cell> 
     <md-cell *cdkCellDef="let row"> 
     {{row[attr.name]}} 
     </md-cell> 
    </ng-container> 
    </ng-container> 

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

</md-table> 

.TSファイル：助けを

export class ListComponent implements OnInit { 
    displayedColumns = []; 
    exampleDatabase = new ExampleDatabase(); 
    dataSource: ExampleDataSource | null; 

    meta: any = { 
    attributes: [] 
    }; 

    constructor(private service: ListService) { 
    //If i do it here it works 
    //this.meta.attributes.push({label: "ID", name: "id"}); 
    } 

    ngOnInit() { 
    this.dataSource = new ExampleDataSource(this.exampleDatabase); 
    this.service.getMeta(this.name).subscribe(meta => { 
     //not here 
     this.meta.attributes.push({label: "ID", name: "id"}); 

     this.service.getTableData(this.name).subscribe(data => { 
     this.exampleDatabase.loadData(data); 

     let cols = []; 
     for (let i = 0; i < this.meta.attributes.length; i++) 
      cols.push(this.meta.attributes[i].name); 
     this.displayedColumns = cols; 
     }); 
    }); 
    } 
} 

...exampleDatabase etc., same as from Angular Website 

ありがとう！

Answer 1

回避策で修正できました...サービスに（メタ）ロードが完了したら、テーブルに* ngIfを追加してすべてを有効にしました。

this.showTable = true; 
console.log('table set exists'); 
setTimeout(() => { // necessary waiting for DOM 
    this.displayedColumns = ['id']; 
    console.log('nameCol set shown'); 
}, 1); 

Answer 2

私は同じ問題を表示していませんでした。空のコンストラクタ：constructor(){}をクラスに追加するか、テーブルを正しく設定しないで解決しました。