Angular 14获取.NET Core接口数据后表格无法显示数据问题

你遇到的表格不渲染、读属性报错问题由3个独立问题共同导致：

• 核心原因：模板绑定属性名大小写不匹配。TypeScript/JavaScript是大小写敏感语言，后端接口返回的字段为小驼峰格式：idDetalle、nombreArticulo、cantidadArticulo、idPedido，但模板中绑定的是大驼峰开头的NombreArticulo、CantidadArticulo、IdPedido、IdDetalle，实际读取到的属性值全为undefined，表格单元格自然无内容。
• *ngIf判断逻辑失效。组件初始化时detalles的默认值是空数组[]，空数组在JS中属于真值（truthy），会直接通过*ngIf="detalles"的判断，在接口还没返回数据的阶段就渲染表格区域，此时数组内无元素，遍历无结果。
• 你在*ngIf块外写的测试代码{{detalles[0].NombreArticulo}}，会在组件初始化第一时间执行，此时接口请求还未完成，detalles[0]为undefined，读取属性就会抛出Cannot read properties of undefined错误。
• 额外DOM结构问题：模板中table标签内漏写了</tbody>闭合标签，可能引发非预期的渲染异常。

1. 统一属性名大小写 #

将模板中所有绑定的属性名修改为和接口返回完全一致的小驼峰格式，对应*ngFor循环内的代码修改为：

<tr *ngFor="let item of detalles">
    <td>{{item.nombreArticulo}}</td>
    <td>{{item.cantidadArticulo}}</td>
    <td>{{item.idPedido}}</td>                            
    <td><a class="btn btn-primary" [routerLink]="['/editar-detalle', item.idDetalle]" routerLinkActive="active">Editar</a></td>                                                
</tr>

2. 修正*ngIf判断条件 #

将判断逻辑从检测detalles是否存在，改为检测数组是否有有效内容，避免初始化空数组阶段提前渲染：

<div *ngIf="detalles.length > 0">

如果需要在判断块外读取数组元素，添加Angular安全导航操作符?.避免空值报错：

{{detalles[0]?.nombreArticulo}}

3. 补全DOM闭合标签 #

在</tr>和</table>标签之间补上缺失的</tbody>标签，保证表格DOM结构完整。

修复完成后，接口返回数据会被正确读取并渲染到表格中，也不会再出现空值读取的控制台报错。

内容的提问来源于stack exchange，提问作者Jhon Hernández