mat-table 显示 header 列而不是行

Question

我正在通过执行以下操作动态加载 mat-table：

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

并且我能够看到 header 列。但是，我没有在 table 中看到其余数据。它显示了基于 dataSource 长度的行数，但它似乎没有输出实际的元数据？我该如何解决这个问题？

这是我的组件的样子：

export class Component implements OnInit {

  constructor(
    private store: Store,
  ) { }

  ngOnInit(): void {
  }

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

你可以看到我正在阅读商店的 dataSource，它看起来像这样：

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

然后我将 dataSource 设置在另一个文件中，如下所示：

this.store.dataSource = data;

我做错了什么吗？非常感谢任何帮助！

Answer 1

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

你没有数据，让数据元素

Answer 2

改变

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

到-

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

成功:)！

Answer 3

我发现了问题，结果证明是因为 col 映射不正确，这就是它显示空 table 的原因:-)

mat-table 显示 header 列而不是行

mat-table showing header columns but not rows

datasource

typescript

angular-material

angular

mat-table