Dynamic Columns in md table

Bug, feature request, or proposal:

I guess is a bug

What is the expected behavior?

1. Load columns definitions via httpService
2. Load data.
3. Show Data Table.
4. Be happy.

What is the current behavior?

1.Load columns definitions via httpService. 2. Crash -> Error: cdk-table: Could not find column with id “FooColumn”. 3. No Show Data Table. 4. Be sad and cry for two hours.

What are the steps to reproduce?

table.template.html

<md-table [dataSource]="dataSource"> <ng-container *ngFor="let attr of meta.attributes"> <ng-container [cdkColumnDef]="attr.name"> <md-header-cell *cdkHeaderCellDef >{{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>

table.component.ts ` export class ProductosComponent implements OnInit {

displayedColumns = [];
private dataSource: ProductoDataSource | null;

meta: any = {
    attributes: []
};


constructor(private displayService: DisplayService) {
   }


ngOnInit() {
    this.displayService
        .ObtenerTabla("PRODUCTOS")
        .subscribe(meta => {
            meta.Columnas.forEach(x => {
                this.meta.attributes.push({ label: x.Nombre, name: x.Propiedad });
                this.displayedColumns.push(x.Nombre);
            });
            //this.dataSource = new ProductoDataSource(this.apiService);
        });
}

} `

Is there anything else we should know?

I found this example https://plnkr.co/edit/WKlClMq39ZOUBaQ7NhKx?p=preview just add *ngIf="meta.attributes.length’ for load the table when all is loaded, but when I do this the table don’t displayed. Sorry for my english. Thanks in Advance.

[fnote]

<md-table #table [dataSource]="dataSource" mdSort>
	    <ng-container *ngFor="let col of displayedColumns" cdkColumnDef={{col}}>
		    <md-header-cell  *cdkHeaderCellDef md-sort-header> {{ col }}</md-header-cell>
		    <md-cell  *cdkCellDef="let row"> {{row[col]}}</md-cell>
	    </ng-container>

this is how i did it…

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}