Angular 2 Material Data Table with dynamic rows

Question

I'm trying to add the rows of an Angular 2 Data Table ( https://material.angular.io/components/table/overview) dynamically. I got a service ("ListService") which gives me the columns("meta.attributes") to display and i can retrieve my data from it.

The problem is, if I change the displayed columns later, after I loaded the dataSource and and the meta.attributes array gets entries (so the rows should exist in the html), it gives me this error:

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

Looks like the header can't find the given rows. Any ideas to fix that?

.html file:

<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 file:

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

Thanks for help!

have u imported import {DataSource} from '@angular/cdk'; ? — nmanikiran
– nmanikiran, Commented Jul 17, 2017 at 11:55
Yeah, I did. My DataSource should be almost ok, the table is shown if I don't update the displayed columns after constructor or onInit. The problem should more be something like the md-header doesn't notice the table has new html elements or sth. similar... — John Brower
– John Brower, Commented Jul 17, 2017 at 12:08

John Brower · Accepted Answer · 2018-01-17 14:19:33Z

1

I was able to fix it by a workaround... I just added an *ngIf to the table and enable everything when service (meta) finished loading.

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

edited Jan 17, 2018 at 14:19

answered Jul 19, 2017 at 12:29

John Brower

831 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cr0mbly · Accepted Answer · 2017-07-24 02:02:35Z

0

I had the same issue where it wasn't displaying. I solved it by adding an empty constructor: constructor(){} into the class or it won't set up the table properly

answered Jul 24, 2017 at 2:02

cr0mbly

512 silver badges4 bronze badges

Collectives™ on Stack Overflow

Angular 2 Material Data Table with dynamic rows

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related