Angular中数据绑定正常却出现Cannot read property of undefined错误

这个问题我太熟悉了——本质是异步数据加载和模板渲染的时序不匹配导致的：你的HTTP请求是异步执行的，组件初始化时模板先完成了渲染，但此时location还没被异步请求的结果赋值（还是undefined），模板尝试访问它的属性（比如遍历列表项）就会抛出这个错误。下面给你几种实用的解决方案：

方案1：使用安全导航操作符（?.） #

这是最直接的临时修复方式，在模板里访问location的属性时加上?.，告诉Angular只有当location存在时才继续访问后续属性：

<select [(ngModel)]="selectedLocation">
  <option *ngFor="let loc of location?.items" [value]="loc.id">{{loc.name}}</option>
</select>

如果你的location本身就是数组，那可以简化为：

<select [(ngModel)]="selectedLocation">
  <option *ngFor="let loc of location?" [value]="loc.id">{{loc.name}}</option>
</select>

方案2：提前初始化location为空数组 #

在组件类里声明location时直接赋值为空数组，这样模板渲染时location至少是一个空数组（不是undefined），不会触发错误，等异步数据返回后会自动更新视图：

// 组件类代码
location: Location[] = []; // 提前初始化为空数组

ngOnInit() {
  this._transactionService.getLocations('User').subscribe(data => this.location = data);
}

模板里就可以正常写：

<select [(ngModel)]="selectedLocation">
  <option *ngFor="let loc of location" [value]="loc.id">{{loc.name}}</option>
</select>

方案3：用*ngIf条件渲染下拉菜单 #

只有当location有值时才渲染下拉菜单，从根源避免模板访问undefined的情况，还能添加加载提示提升用户体验：

<select *ngIf="location" [(ngModel)]="selectedLocation">
  <option *ngFor="let loc of location" [value]="loc.id">{{loc.name}}</option>
</select>
<div *ngIf="!location">加载地点列表中...</div>

方案4：使用async管道（推荐） #

这是Angular处理异步数据最优雅的方式，不需要手动订阅Observable，Angular会自动帮你管理订阅和取消订阅，还能避免内存泄漏：
首先修改组件类，把location改成Observable类型：

// 组件类代码
location$: Observable<Location[]>;

ngOnInit() {
  this.location$ = this._transactionService.getLocations('User');
}

然后模板里用async管道订阅数据：

<select [(ngModel)]="selectedLocation">
  <option *ngFor="let loc of location$ | async" [value]="loc.id">{{loc.name}}</option>
</select>

以上几种方案都能解决你的问题，个人推荐用async管道，符合Angular的最佳实践，代码也更简洁易维护。

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