Angular Material Data Table not displayed

Question

Hi I have the following problem. I made an Angular Material table as in the example provided on the documentation site. My problem is now the table is rendered and also the right amount of rows is rendered but no columns and no data is displayed.

<div class="app-errors">
   <div class="spinner-container" *ngIf="dataSource.loading$ | async">
     <mat-spinner></mat-spinner>
   </div>
   <mat-table [dataSource]="dataSource">
     <ng-container matColumnDef="seqNo" >
        <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
        <mat-cell *matCellDef="let data">{{data.id}}</mat-cell>
     </ng-container>

     <mat-header-row  *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table></div>

Rendered:

<app-errors _nghost-c4="" class="ng-star-inserted">
 <div _ngcontent-c4="" class="app-errors">
   <!---->
   <mat-table _ngcontent-c4="" class="mat-table" role="grid"><!----><!---->
      <mat-row _ngcontent-c4="" class="mat-row ng-star-inserted" role="row">
           <!---->
      </mat-row>
   </mat-table>
  </div>
 </app-errors>

yes data is in the dataSource. Tried it the way it should work later with a rest request to retrieve the data but also tried it with a local array of data but i get the same result rows are correct but columns and data not — R. Mosser
– R. Mosser, Commented Mar 14, 2018 at 9:16

R. Mosser · Accepted Answer · 2018-03-14 10:21:45Z

1

Problem solved. Created a new project with the exact same configuration copied everything in there now it works. Very strange behavior

answered Mar 14, 2018 at 10:21

R. Mosser

214 bronze badges

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

Collectives™ on Stack Overflow

Angular Material Data Table not displayed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related