mat-table showing header columns but not rows-CodePudding

I am dynamically loading a mat-table by doing the following:

<mat-table mat-table [dataSource]="dataSource">
    <ng-container *ngFor="let col of dispColumns" matColumnDef="{{col}}">
        <mat-header-cell *matHeaderCellDef>{{col}}</mat-header-cell>
        <mat-cell *matCellDef="let element ">
            {{element[col]}}
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="dispColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: dispColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons
   aria-label="Select page of query data">
</mat-paginator>

and I am able to see the header columns. However, I don't see the rest of the data in the table. It shows the number of rows based on the dataSource length but it doesn't seem to output the actual metadata? How can I fix this issue?

This is how my component looks like:

export class Component implements OnInit {

  constructor(
    private store: Store,
  ) { }

  ngOnInit(): void {
  }

  get dataSource() {
    return this.store.dataSource;
  }
}

You can see that I am reading the dataSource from the store, which looks like this:

public dataSource = new MatTableDataSource<any>([]);

and then I set the dataSource in a different file like this:

this.store.dataSource = data;

Am I doing something worng? Any help is greatly appreciated!

CodePudding user response：

<mat-cell *matCellDef="let element ">
            {{element[col]}}
        </mat-cell>

you dont have a data ,let element of data

CodePudding user response：

change

 <mat-table mat-table>
</mat-table>

to-

<table mat-table ..>
....
</table>

Successes:)!

CodePudding user response：

I figured out the issue and it turns out it was because col wasn't mapping right, which is why it displayed an empty table :-)