Angular 2+中使用Async管道处理嵌套可迭代数据的问题

嗨，这个场景太常见了！接口返回结构变了但不想放弃Async管道的便利性，其实只需要用RxJS的map操作符把返回的数据转换一下就行，完全不用手动订阅～

步骤1：修改TS代码，转换Observable #

首先，你需要导入RxJS的map操作符，然后在http.get之后链式调用map，把返回对象里的data数组提取出来：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; // 别忘了导入map操作符

@Component({
  // 组件元数据...
})
export class YourComponent implements OnInit {
  options: Observable<any[]>; // 现在明确类型是数组的Observable

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.options = this.http.get('/web/service/url').pipe(
      map(response => response.data) // 从返回的对象中提取data数组
    );
  }
}

步骤2：HTML代码完全不用改 #

你的原有HTML代码可以保持不变，因为现在options已经是data数组的Observable了，Async管道会自动处理订阅和取消订阅：

<select>
  <option *ngFor="let option of options | async" [value]="option.id">
    {{option.description}}
  </option>
</select>

额外小提示：模板里直接处理（不推荐） #

如果你不想修改TS代码，也可以在模板里通过可选链操作符直接访问data，但这种写法会让模板逻辑变多，不如TS里处理清晰：

<select>
  <option *ngFor="let option of (options | async)?.data" [value]="option.id">
    {{option.description}}
  </option>
</select>

推荐第一种TS里用map转换的方式，既保持模板简洁，也符合Angular中“逻辑尽量放在组件类中”的最佳实践～

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