Angular Material表格无法显示求助：matCellDef提示'of expected'

我帮你梳理下问题的几个核心关键点，一步步来修复：

1. 缺少数据行模板（导致无内容+语法错误的核心原因） #

你的HTML代码里完全没有渲染数据行的<tr mat-row>模板，这是表格空内容的主要原因，同时也会触发'of expected'的语法提示。必须在表格中添加这一行，它的作用是告诉Angular如何根据你定义的列来渲染每一行数据：

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

2. 补充缺失的matCellDef单元格模板 #

你定义了displayedColumns = ['position', 'name', 'weight', 'symbol']，但只有position列有对应的<td mat-cell>模板，其他三列（name、weight、symbol）只有表头，没有单元格内容的模板。

如果你只想显示id字段（对应position列），最简单的方式是修改displayedColumns，只保留需要的列：

displayedColumns = ['position'];

如果后续需要显示其他字段，再补充对应列的单元格模板即可，比如：

<!-- Name Column -->
<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Nome</th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

3. 异步数据加载的小优化 #

虽然你在constructor里初始化了dataSource，但更推荐把数据获取逻辑放到ngOnInit生命周期钩子中，这是Angular官方推荐的最佳实践：

import { OnInit } from '@angular/core';

export class AdminIndexCompanyComponent implements OnInit {
  companies: Company[] = [];
  displayedColumns = ['position'];
  dataSource: MatTableDataSource<Company>;

  constructor(private companyService: CompanyAPIsService) {}

  ngOnInit(): void {
    this.companyService.getAllCompanies().then((company: Company[]) => {
      this.companies = company;
      this.dataSource = new MatTableDataSource<Company>(this.companies);
      // 如果需要启用排序，记得先在组件里声明@ViewChild(MatSort) sort: MatSort;
      // this.dataSource.sort = this.sort;
    });
  }
}

修复后的完整HTML示例 #

<div class="content"> 
  <div class="row"> 
    <div class="col-6 col-md-4 col-xl-2"> 
      <button class="mat-raised-button" [routerLink]="['add']">Aggiungi</button> 
    </div> 
  </div> 
  <mat-card> 
    <mat-card-content> 
      <table mat-table #table matSort [dataSource]="dataSource"> 
        <!-- Position Column -->
        <ng-container matColumnDef="position">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <!-- 新增的数据行模板 -->
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table> 
    </mat-card-content> 
  </mat-card> 
</div>

按照上面的步骤修改后，表格应该就能正常加载并显示数据了。

内容的提问来源于stack exchange，提问作者user7272904