mat-table 显示标题列但不显示行

Posted 2023-02-26

【中文标题】mat-table 显示标题列但不显示行

【英文标题】：mat-table showing header columns but not rows

【发布时间】：2021-12-29 18:35:54

【问题描述】：

我正在通过执行以下操作动态加载垫表：

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

我可以看到标题列。但是，我没有看到表中的其余数据。它显示基于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;

我是不是在做一些破旧的事？非常感谢任何帮助！

【问题讨论】：

你能附上样本数据吗？

【参考方案1】：

我发现了这个问题，原来是因为col 没有正确映射，这就是它显示空表的原因:-)

【参考方案2】：

改变

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

到-

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

成功:)！

【参考方案3】：

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

你没有数据，让数据元素

【讨论】：

对不起，我有别的想法