Mat Dialog弹窗内嵌Mat Table无法显示数据问题

核心问题排查 #

• 第一优先级问题：接口返回500服务端错误
  你请求的/api/DeliveryReceipt/list接口返回500状态码，说明服务端处理请求异常，前端订阅的成功回调根本不会执行，DeliveryReceipt始终是初始空数组，表格自然没有数据可渲染。
• 代码层潜在问题：
  • 未正确调用getList()方法：写完方法忘记在ngOnInit或者Dialog打开生命周期里执行，请求根本没发出去
  • 直接给[dataSource]传普通数组，在Mat Dialog的独立变更检测上下文里，异步赋值后很容易无法触发表格重渲染
  • 类型定义错误：标注响应类型为DeliveryReceiptDTO，但实际取的是响应体的items字段，说明接口返回的是分页包装对象，类型不匹配容易出现字段取值错误
  • 未确认模块导入：如果当前Dialog所属模块没导入MatTableModule，表格只会渲染表头不会渲染数据行

问题表现参考：

修复步骤 #

1. 先解决接口500错误 #

优先排查后端服务问题：

• 校验传入的分页参数（当前传的是页大小20、页码1）是否符合接口入参规则
• 排查后端接口的权限校验、数据库查询、返回值序列化逻辑，确保接口返回200状态码，且响应体中存在数组类型的items字段

2. 修正TS侧代码 #

用官方提供的MatTableDataSource封装数据源，避免变更检测不触发的问题，同时补全错误处理、类型定义：

.TS 代码

import { MatTableDataSource } from '@angular/material/table';
import { OnInit, ChangeDetectorRef } from '@angular/core';

// 按接口实际返回结构定义分页响应类型
interface DeliveryReceiptPageRes {
  items: DeliveryReceiptDTO[];
  total: number;
}

export class YourDialogComponent implements OnInit {
  // 用MatTableDataSource初始化数据源
  DeliveryReceipt = new MatTableDataSource<DeliveryReceiptDTO>([]);
  displayedColumns: string[] = ['transactionType'];
  deliveryReceiptObject: DeliveryReceiptPageRes | null = null;

  constructor(
    private DeliverySVC: DeliveryService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    // 初始化周期必须调用列表请求方法
    this.getList();
  }

  getList() {
    this.DeliverySVC.findAll(20, 1).subscribe({
      next: (response: DeliveryReceiptPageRes) => {
        this.deliveryReceiptObject = response;
        // 直接给dataSource的data属性赋值，无特殊需求不需要做JSON序列化深拷贝
        this.DeliveryReceipt.data = response.items ?? [];
        // 赋值后仍不渲染就执行下面这行，手动触发变更检测
        this.cdr.detectChanges();
      },
      error: (err) => {
        console.error('获取交货单列表失败：', err);
      }
    }) 
  }
}

3. HTML侧代码调整 #

原有HTML逻辑基本正确，只需要确认绑定的数据源变量名和TS侧一致即可：

.HTML 代码

<table mat-table [dataSource]="DeliveryReceipt">
  <ng-container matColumnDef="transactionType">
    <th mat-header-cell *matHeaderCellDef>DR NUMBER </th>
    <td mat-cell *matCellDef="let element">
      <span>{{element.transactionType}}</span>
    </td>
  </ng-container>

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

额外校验点 #

• 确认Dialog所属模块已经导入MatTableModule，缺少模块导入时表格功能不会正常生效
• 确认接口返回的items数组中，每个元素都存在transactionType字段，避免字段名拼写错误（比如写成下划线命名transaction_type）导致单元格内容为空

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