MatTable 在 Angular 10 上无法正常工作

Question

不确定是不是因为我是使用 Angular Material 10 从零开始创建这个项目的，我还没有使用过它，它的工作方式不同，或者是因为我只是做错了什么，但是 mat-table 现在甚至没有显示在我的页面上，而且我以前从未遇到过这种情况。

Table代码：

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef>Actions</th>
  <td mat-cell *matCellDef="let row">
    <button (click)="edit(row.id)">EDIT</button>
    <button (click)="delete(row.id)">DELETE</button>
  </td>
</ng-container>

<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef>Status</th>
  <td mat-cell *matCellDef="let row">{{ row.status }}</td>
</ng-container>

<ng-container matColumnDef="browser">
  <th mat-header-cell *matHeaderCellDef>Weight</th>
  <td mat-cell *matCellDef="let row">{{ row.browser }}</td>
</ng-container>

<ng-container matColumnDef="origin">
  <th mat-header-cell *matHeaderCellDef>Symbol</th>
  <td mat-cell *matCellDef="let row">{{ row.origin }}</td>
</ng-container>

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

DataSource init + displayedColumns:

  displayedColumns: ['actions', 'status', 'browser', 'origin'];
  dataSource = [];

  length = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  constructor(private logService: LogService, private dialog: MatDialog) {}

  ngOnInit(): void {
     this._loadData();
  }

 private _loadData(): void {
     const params = { size: this.pageSize, pageIndex: 0 };
     this.logService.loadData(params).subscribe((res) => {
         this.dataSource = res.content;
     });
}

请求工作正常，并且从对象中正确地提供了信息，只是 table 没有出现...

MatTable模块已正确导入到项目中。

我也试过从 Angular Material stackblitz 中直接复制粘贴代码，但它也不起作用。

Answer 1

您应该将 displayedColums 分配给未为其定义类型的数组：

displayedColumns: ['actions', 'status', 'browser', 'origin'];
               ^^^
            replace : with =

MatTable 在 Angular 10 上无法正常工作

MatTable not working properly on Angular 10

angular-material

angular

angular-material-table