Angular表格仅显示首行：如何展示allParts数组全部对象？

我尝试在Angular表格中展示allParts数组的对象列表，但表格仅渲染第一行。使用<ul>标签配合*ngFor指令却能正常显示所有数据。

表格代码 #

<table >
      <thead>
      <tr>
        <th>partId</th>
        <th>partName</th>
        <th>partDesc</th>
        <th>partTypeCode</th>
        <th>createdBy</th>
        <th>updatedBy</th>
        <th>createdDate</th>
        <th>updatedDate</th>
      </tr>
      </thead>
      <tbody>
       
      <tr *ngFor="let part of allParts;">
        <td ><span>{{part.partId}}</span></td>
        <td><span>{{part.partName}}</span></td>
        <td ><span>{{part.partDesc}}</span></td>
        <td><span>{{part.partTypeCode}}</span></td>
        <td ><span>{{part.createdBy.firstName}}</span></td>
        <td ><span>{{part.updatedBy.firstName}}</span></td>
        <td ><span>{{part.createdDate | slice:0:10}}</span></td>
        <td ><span>{{part.updatedDate| slice:0:10}}</span></td>
       
      </tr>
    
      </tbody>
    </table>

（表格仅显示首个对象）

列表代码 #

<ul>
    <li *ngFor="let part of allParts">{{part |json}}</li>
</ul>

（列表显示全部对象）

allParts数据结构 #

[
  { "partId": 1, "partName": "", "partDesc": "", "createdBy": { "firstName": "John", "lastName": "Doe", "email": "john.doe@gm.com", "password": "P@ssw0rd!", "companyName": "GM", "id": "abc123" }, "updatedBy": null, "partType": { "partTypeCode": "pt1", "partTypeDesc": "pt1desc" }, "createdDate": "2023-01-03T22:13:24.180+00:00", "updatedDate": null, "quantity": 1 },
  { "partId": 2, "partName": "", "partDesc": "", "createdBy": { "firstName": "John", "lastName": "Doe", "email": "john.doe@gm.com", "password": "P@ssw0rd!", "companyName": "GM", "id": "abc123" }, "updatedBy": null, "partType": { "partTypeCode": "pt1", "partTypeDesc": "pt1desc" }, "createdDate": "2023-01-03T22:13:54.966+00:00", "updatedDate": null, "quantity": 1 },
  { "partId": 3, "partName": "", "partDesc": "", "createdBy": { "firstName": "John", "lastName": "Doe", "email": "john.doe@gm.com", "password": "P@ssw0rd!", "companyName": "GM", "id": "abc123" }, "updatedBy": null, "partType": { "partTypeCode": "pt1", "partTypeDesc": "pt1desc" }, "createdDate": "2023-01-03T22:14:20.081+00:00", "updatedDate": null, "quantity": 1 }
]

问题原因与修复方案 #

问题根源 #

1. 空指针异常中断渲染：后续数据中updatedBy为null，表格代码直接访问{{part.updatedBy.firstName}}会触发空指针错误，导致Angular停止渲染后续行。
2. 属性路径错误：partTypeCode实际嵌套在partType对象下，原代码直接取part.partTypeCode无法获取值。

修改后的表格代码 #

<table>
  <thead>
    <tr>
      <th>partId</th>
      <th>partName</th>
      <th>partDesc</th>
      <th>partTypeCode</th>
      <th>createdBy</th>
      <th>updatedBy</th>
      <th>createdDate</th>
      <th>updatedDate</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let part of allParts;">
      <td><span>{{part.partId}}</span></td>
      <td><span>{{part.partName}}</span></td>
      <td><span>{{part.partDesc}}</span></td>
      <td><span>{{part.partType?.partTypeCode}}</span></td>
      <td><span>{{part.createdBy?.firstName}}</span></td>
      <td><span>{{part.updatedBy?.firstName || '-'}}</span></td>
      <td><span>{{part.createdDate | slice:0:10}}</span></td>
      <td><span>{{part.updatedDate | slice:0:10 || '-'}}</span></td>
    </tr>
  </tbody>
</table>

关键修改点 #

• 使用安全导航操作符?.：避免访问null对象的属性时抛出异常，确保渲染流程不中断；
• 空值兜底处理：用|| '-'为null/空值显示替代符号，提升界面友好性；
• 修正partTypeCode的取值路径：从part.partTypeCode改为part.partType?.partTypeCode。

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