使用Angular 5从数据库获取数据时得到空对象的问题求助

我最近碰到一个棘手的问题，之前提问过现在整理了完整信息，具体情况如下：

• 数据库返回的数据里，第一个对象是空的
• 我在app.component.ts里获取了这些数据，然后在HTML模板中渲染
• 这个空对象引发了页面渲染异常，报错信息类似Cannot read properties of undefined (reading 'name')

相关代码片段 #

数据库返回的数据示例 #

[
  {}, // 这里是空对象
  { "id": 1, "name": "测试数据1" },
  { "id": 2, "name": "测试数据2" }
]

app.component.ts 数据获取逻辑 #

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  dataItems: any[] = [];

  constructor(private dataService: YourDataService) {}

  ngOnInit(): void {
    this.dataService.fetchData().subscribe(response => {
      this.dataItems = response;
    });
  }
}

HTML模板代码 #

<div *ngFor="let item of dataItems">
  <span>{{ item.name }}</span>
</div>

嘿，这种空对象导致的渲染错误在Angular项目里真的很常见，给你几个靠谱的处理方式：

1. 前端获取数据时直接过滤（最直接） #

在拿到后端返回的数据后，先把空对象或者属性不完整的条目过滤掉，这样模板里就不会处理无效数据了：

ngOnInit(): void {
  this.dataService.fetchData().subscribe(response => {
    // 过滤掉空对象
    this.dataItems = response.filter(item => Object.keys(item).length > 0);
    // 如果需要确保有name属性，可以改成：
    // this.dataItems = response.filter(item => item?.name);
  });
}

2. 模板里做安全处理（适合需要保留空条目场景） #

如果业务上需要保留这个空对象，只是不想让页面报错，可以用Angular的安全导航操作符?.，或者配合*ngIf做判断：

方式一：安全导航操作符 + 默认值 #

<div *ngFor="let item of dataItems">
  <span>{{ item?.name || '暂无数据' }}</span>
</div>

?.会在item为空或者name不存在时停止访问，避免报错，||用来设置空值时的默认显示内容。

方式二：用*ngIf控制显示 #

<div *ngFor="let item of dataItems">
  <span *ngIf="item?.name">{{ item.name }}</span>
  <span *ngIf="!item?.name">暂无数据</span>
</div>

这种方式更灵活，能分别处理有数据和无数据的显示样式。

3. 从后端源头解决（推荐最优方案） #

如果可以的话，最好和后端同学沟通，让接口返回的数据里直接去掉这种空对象，从源头避免问题，这样前端代码会更简洁，也减少了前端的处理成本。

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