Dynamic Columns in md table
See original GitHub issueBug, feature request, or proposal:
I guess is a bug
What is the expected behavior?
- Load columns definitions via httpService
- Load data.
- Show Data Table.
- 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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:9
- Comments:10 (3 by maintainers)
Top GitHub Comments
this is how i did it…
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.