Angular遍历服务器返回数据及serverData变量声明问题

一、正确的遍历方式 #

你当前代码报错的核心原因有两个：

1. 大小写不匹配：服务器返回的数组字段是cellList（小写开头），但你写的是CellList（大写C），JavaScript/TypeScript严格区分大小写，导致找不到对应属性。
2. 异步数据空值风险：服务器数据是异步返回的，初始状态下serverData可能为undefined或null，直接访问嵌套属性会触发空指针错误。

修改后的遍历代码（加入安全导航操作符?.避免空值报错）：

<!-- 遍历表头 -->
<th *ngFor="let data of serverData?.tHead?.cellList">{{data.content}}</th>

<!-- 遍历表体（如果需要） -->
<td *ngFor="let data of serverData?.tBody?.cellList">{{data.content}}</td>

二、变量声明的正确姿势 #

服务器返回的是单个对象而非数组，因此不能用myPropertyInterface[]（数组类型），否则会出现类型不匹配问题。

步骤1：定义对应类型接口 #

先明确数据结构的TypeScript接口，提升代码可读性和类型校验：

// 单元格数据接口
interface TableCell {
  content: string;
}

// 表格区块（表头/表体）接口
interface TableSection {
  cellList: TableCell[];
}

// 服务器返回的完整数据接口
interface ServerResponse {
  tHead: TableSection;
  tBody: TableSection;
}

步骤2：声明变量 #

有两种常用方式：

1. 初始化为undefined（推荐配合安全导航操作符）

serverData: ServerResponse;

这种方式不需要提前初始化，等服务器数据返回后直接赋值即可，结合模板中的?.操作符，能避免初始状态的空值报错。

2. 初始化为空对象（类型断言）

serverData: ServerResponse = {} as ServerResponse;

注意：这种方式只是做了类型断言，实际对象的tHead、tBody属性还是未定义的，直接访问仍会报错，所以依然需要配合?.操作符使用。

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