MatTableDataSource未显示数据，但生成了单元格

Question

我的mat-table包含2列。我想将数据插入每个单元格，但表中没有任何内容。

这是我的html：

<div class="example-container" *ngIf="hasResult" style="max-height: 500px;overflow: auto;">
  <mat-table [dataSource]="dataSource">

    <!-- Progress Column -->
    <ng-container matColumnDef="REG_DATE">
      <mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.REG_DATE}} </mat-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="USE_BYTE">
      <mat-header-cell *matHeaderCellDef> Use byte </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.USE_BYTE}} </mat-cell>
    </ng-container>

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

---

这也是我的ts文件： 当我从同一文件夹中的另一个html单击search_more（）时，数据表将由data.data填充。 我从函数fetch_more（）接收了数据（数组的25个元素），效果很好。

  search_more(row: any) {
    this.prod_no = row.PROD_NO;
    this.loading = true;
    this.fetch_more((data) => {

      console.log(data.data);

      this.openDialog(data.data);

      this.loading = false;
    });
  }

  openDialog(data): void {
    let dialogRef = this.dialog.open(DetailDialog, {
      width: '500px',
      maxHeight: '600px',
      data: { detail: data }

    });

export class DetailDialog {
  dataSource: MatTableDataSource<any>;
  hasResult = false;
  displayedColumns = ['REG_DATE', 'USE_BYTE'];

  constructor(public dialogRef: MatDialogRef<DetailDialog>, @Inject(MAT_DIALOG_DATA) public data: any) {

    if (data.detail.length > 0) {
      this.hasResult = true;
      const _details = _.orderBy(data.detail, ['REG_DATE']);
      this.dataSource = new MatTableDataSource(_details);

      console.log("DETAILS: " + _details.length);

    } 
    else {
      this.hasResult = false;
    }
  }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

行为空

Answer 1

我几乎有同样的问题。经过几个小时的搜索，我发现了以下内容。在https://material.angular.io/components/table/overview，显示的列声明为：

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

所以也许您要做的就是改变

export class DetailDialog {
  ...
  displayedColumns = ['REG_DATE', 'USE_BYTE']; ...

到

export class DetailDialog {
  ...
  displayedColumns: string[] = ['REG_DATE', 'USE_BYTE']; ...

这为我解决了问题。