Angular/Ionic模板中Observable数据无法渲染的问题

先给你梳理下问题出在哪，以及怎么修复：

核心问题1：模板里的list$.items用法错误 #

你的list$本身就是一个Observable对象，并不是包含items属性的对象。而且从你控制台能打印出数据来看，action.payload.data()返回的应该是你要的数组（或者包含数组的对象），所以模板里的遍历写法完全不对。

核心问题2：模板语法存在笔误 #

你模板里的{{item.item}...少了一个闭合的}，这种语法错误也会直接导致渲染失败。

分情况针对性修复： #

情况1：action.payload.data()直接返回数组

如果控制台打印的res是类似[{item: 'xxx'}, {item: 'yyy'}]的数组，那按下面修改：

1. list.ts保持现有逻辑不变（已经正确返回数组的Observable）：

list$: Observable<any[]>;
constructor() {
  this.listDocumentRef = /* 你的文档引用 */;
  this.list$ = this.listDocumentRef.snapshotChanges().map(action => {
    return action.payload.data();
  });
  this.list$.subscribe(res => console.log(res)); // 验证数据
}

2. list.html修正遍历语句，去掉.items并补全括号：

<ion-item *ngFor="let item of list$ | async" >
  <ion-label>{{item.item}}</ion-label>
</ion-item>

情况2：action.payload.data()返回包含items数组的对象

如果控制台打印的res是类似{items: [{item: 'xxx'}, {item: 'yyy'}]}的对象，那需要先在Observable里提取出items数组：

1. list.ts修改map逻辑，提取目标数组：

list$: Observable<any[]>;
constructor() {
  this.listDocumentRef = /* 你的文档引用 */;
  this.list$ = this.listDocumentRef.snapshotChanges().map(action => {
    const data = action.payload.data();
    return data.items; // 提取出items数组
  });
  this.list$.subscribe(res => console.log(res)); // 验证数据
}

2. list.html同样修正遍历语句和括号：

<ion-item *ngFor="let item of list$ | async" >
  <ion-label>{{item.item}}</ion-label>
</ion-item>

额外提醒：如果你的Angular版本较新，map操作符需要从rxjs/operators导入，并且要用pipe包裹，示例如下：

import { map } from 'rxjs/operators';

// ...

this.list$ = this.listDocumentRef.snapshotChanges().pipe(
  map(action => action.payload.data())
);

这样修改后应该就能正常把数据渲染到Ionic模板里了～

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