Angular表格无法渲染数据求助：控制台有数据但表格无内容

控制台可正常获取并打印数据，但表格仅显示列标题，无法渲染数据行。以下是相关代码，请求排查错误原因。

product-list.component.html #

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="ProductName">
      <th mat-header-cell *matHeaderCellDef> Product Name </th>
      <td mat-cell *matCellDef="let element"> {{element.ProductName}} </td>
    </ng-container>

    <ng-container matColumnDef="ProductStock">
      <th mat-header-cell *matHeaderCellDef> Stock </th>
      <td mat-cell *matCellDef="let element"> {{element.ProductStock}} </td>
    </ng-container>

    <ng-container matColumnDef="ProductPrice">
      <th mat-header-cell *matHeaderCellDef> Price </th>
      <td mat-cell *matCellDef="let element"> {{element.ProductPrice}} </td>
    </ng-container>

    <ng-container matColumnDef="CreatedDateTime">
      <th mat-header-cell *matHeaderCellDef> Created Date </th>
      <td mat-cell *matCellDef="let element"> {{element.CreatedDateTime}} </td>
    </ng-container>

    <ng-container matColumnDef="ModifiedDateTime">
      <th mat-header-cell *matHeaderCellDef> Updated Date </th>
      <td mat-cell *matCellDef="let element"> {{element.ModifiedDateTime}} </td>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 20]"
                 showFirstLastButtons
                 aria-label="Select page of periodic elements">
  </mat-paginator>
</div>

product-list.component.ts #

displayedColumns: string[] = ['ProductName','ProductStock','ProductPrice','CreatedDateTime','ModifiedDateTime'];
dataSource : MatTableDataSource<product_list> = null
@ViewChild(MatPaginator) paginator : MatPaginator;

async ngOnInit() {
    this.showSpinner(SpinnerType.BallBits);

    const productsAll : product_list[] = await this.productService.productList(() => this.hideSpinner(SpinnerType.BallBits), error => this.alertify.message(error, {
      messageType : MessageType.Error,
      position : MessagePosition.TopRight
    }));
    
    this.dataSource = new MatTableDataSource<product_list>(productsAll);
}

错误原因及修复方案 #

1. 分页器未绑定到数据源（核心问题） #

虽然声明了@ViewChild(MatPaginator)，但初始化dataSource后未将分页器赋值给它。MatTable需要感知分页器的存在才能正确触发视图更新，否则即使数据源有数据，也可能无法渲染行。

修复代码：
在this.dataSource = new MatTableDataSource<product_list>(productsAll);后添加：

this.dataSource.paginator = this.paginator;

2. 初始数据源为null的潜在问题 #

初始将dataSource设为null，可能导致Angular变更检测出现异常。建议初始化为空的数据源：

dataSource: MatTableDataSource<product_list> = new MatTableDataSource<product_list>([]);

3. 字段名大小写匹配检查 #

确保product_list接口的字段名（如ProductName）与API返回的数据字段完全一致（大小写敏感）。如果API返回的是小驼峰格式（如productName），会导致插值表达式无法获取值，数据行呈现为空。

内容的提问来源于stack exchange，提问作者İbrahim Özdemir