Angular 5 material table isn't showing data

Question

Hy, I'm working on a web-based application in angular 5. In this app, we use the angular material. On one of the pages we have a mat-table but we can't get it to work. The table never shows us any data. The data we call from multiple backends and with a debugger, we know the data isn't null. Even if we try to use the angular material example it still doesn't work. What do we wrong?

HTML

  <mat-table #invoiceTable [dataSource]="datasource" matSort>
    <ng-container matColumnDef="SerialNr">
      <th mat-header-cell *matHeaderCellDef> SerialNr. </th>
      <td mat-cell *matCellDef="let movement" > {{movement?.serialNr}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </mat-table>

TS

displayedColumns = ['SerialNr'];
movements = [];
// datasource = new MatTableDataSource<Movement>(this.movements);
datasource: MovementDataSource;

  getMovementsByVehicleID() {
 this.authUser.ownedVehicles.forEach((vehicle) => {
    this.movementService.getMovementsByCarID(vehicle.id).subscribe(
      (newMovemnts) => {
        this.movements = newMovemnts;
        this.datasource.update(newMovemnts);
      },
    );
  }
);
}




export class MovementDataSource extends DataSource<Movement> {

constructor(private movements: Movement[]) {
  super();
}

connect(): Observable<Movement[]> {
  return Observable.of(this.movements);
}

update(movements: Movement[]) {
  movements.forEach((move) => {
    this.movements.push(move);
  });
}

   disconnect(collectionViewer: CollectionViewer): void {
   }
}

MATERIAL.TS

@NgModule({
  imports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule,
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule
  ],
  declarations: []
})
export class MaterialModule {
}

We have tried a lot of things. this is the latest version but it still doesn't work. Off course we added the material module in the imports of the app.module.ts. The strange thing is even the examples doesn't work. Any idea's?

I have updated my question. It still isn't working

Did you follow the setup guide? https://v5.material.angular.io/guide/getting-started — Kim Kern, May 18 '18 at 20:38
yes. on the other pages I use other material components but only the table isn't working — Ties Theunissen, May 19 '18 at 09:29
Change detection may be a problem... Are you doing change detection manually.... In parent component or in the same component — Atikur Rahman, May 20 '18 at 03:07
try adding DI like this: constructor(private ref: ChangeDetectorRef) and add this line this.ref.detectChanges(); before this.movements = newMovemnts; — chandoo, Aug 10 '18 at 04:58

Ravi Sankar Rao · Answer 1 · 2018-05-20T02:39:48.697

0

By the documentation Table | Angular Material,

<th mat-header-cell *matHeaderCellDef> SerialNr. </th> needs to be part of the ng-container as per the docuentation. Tried without it and the table does not render. In you case this is missing.
displayedColumns needs to be an array of strings which contains the columns you need to be displayed. I see that missing too in your component.ts. In your case it should be displayedColumns = ['SerialNr'];

Rest all looks fine.

Have forked an existing example on stackblitz

edited May 20 '18 at 02:39

answered May 19 '18 at 22:43

Ravi Sankar Rao

1,050
11
26

I have included your answer but it still isn't working. – Ties Theunissen May 22 '18 at 14:25
can you create a stackblitz project, so that it would be easy to debug – Ravi Sankar Rao May 22 '18 at 19:39

score 0 · Answer 2 · answered Jan 24 '19 at 11:18

I had the same problem and forgot to call renderRows() method when the async data was updated. See Angular 5 material table documentation https://v5.material.angular.io/components/table/overview.

This answer gave me the inspiration: Calling renderRows() on Angular Material Table

Angular 5 material table isn't showing data

2 Answers2