Angular 5中渲染视图前等待数据加载的问题求助

嘿，作为Angular 5新手碰到这个问题太正常啦！你看到的「undefined」是因为组件初始化时trips还没拿到服务返回的异步数据，模板先渲染了它的初始值，等请求完成后才更新为正确内容。给你几个实用的解决办法：

1. 用安全导航操作符（?.）避免undefined显示 #

这是最简单快速的方案，直接在模板中访问属性时加上?.，当数据未加载完成时会自动跳过属性访问，不会显示undefined：

<!-- 原来的写法（会显示undefined） -->
{{ trip.name }}
<!-- 修改后的写法 -->
{{ trip?.name }}

<!-- 针对Map的访问也适用 -->
{{ numberOfUsers?.get('userId') }}

2. 给变量初始化默认值 #

在组件中给trips初始化一个空数组，这样模板遍历或访问属性时，不会因为变量是undefined而出错或显示异常：

// 组件.ts中修改
public trips: Trip[] = []; // 初始化为空数组
public numberOfUsers : Map<string, number> = new Map<string, number>(); // 已初始化，没问题

3. 用*ngIf条件渲染隐藏未加载内容 #

把依赖异步数据的DOM部分用*ngIf包裹，只有当数据存在时才渲染这部分内容，从根源上避免undefined的出现：

<div *ngIf="trips.length > 0">
  <!-- 这里放需要trips数据的渲染内容，比如列表 -->
  <div *ngFor="let trip of trips">
    {{ trip.name }}
  </div>
</div>
<!-- 可选：添加加载提示 -->
<div *ngIf="!trips.length">加载中...</div>

4. 用AsyncPipe优雅处理Observable（推荐） #

如果你的tripService.getTripForMe()返回的是Observable，可以直接用Angular的AsyncPipe，它会自动处理订阅、取消订阅，还能避免内存泄漏，同时不会显示undefined：

// 组件.ts修改
public trips$: Observable<Trip[]>; // 定义为Observable类型

constructor(private tripService: TripService) { }

ngOnInit() {
  this.trips$ = this.tripService.getTripForMe(); // 直接赋值Observable，不用手动subscribe
}

模板中使用AsyncPipe：

<div *ngFor="let trip of trips$ | async">
  {{ trip.name }}
</div>

根据你的实际场景选一个最适合的方案就行，安全导航符和初始化默认值是最容易上手的，AsyncPipe则是更符合Angular异步编程风格的做法～

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