Angular从Firestore读取数据后页面无法显示内容的问题排查

嘿，我来帮你排查这个问题～你遇到的invalidPipeArgument错误，核心原因是**async管道的使用和组件里的subscribe操作冲突了**，咱们一步步来理清楚：

为什么会报错？ #

async管道的作用是自动订阅一个Observable或Promise，并把它的值渲染到页面上。但你在组件里的操作是：

• 调用valueChanges().subscribe()，把Observable转换成了普通的数组（this.missions = _missions）
• 然后在HTML里又给这个普通数组加了| async管道，这就导致管道收到的不是它期望的Observable，而是普通对象数组，所以抛出了错误。

另外，你的组件代码里还有个小语法错误：ngOnInit里的subscribe回调函数的大括号没有闭合，这也可能影响代码执行。

修正步骤 #

1. 调整组件代码，直接使用Observable

把组件里的missions改成Observable<Mission[]>类型，并且不要手动subscribe，直接把valueChanges()返回的Observable赋值给它，让async管道来处理订阅逻辑：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {AngularFirestore, AngularFirestoreCollection} from 'angularfire2/firestore';

interface Mission {
 cliente: string;
 luogo: string;
 materiale: string;
 nCassoni: number;
 nota: string;
 operatore: string;
}

@Component({
 selector: 'app-check-mission',
 templateUrl: './check-mission.component.html',
 styleUrls: ['./check-mission.component.css']
})
export class CheckMissionComponent implements OnInit {
 missionsCol: AngularFirestoreCollection<Mission>;
 missions: Observable<Mission[]>; // 这里指定正确的类型

 constructor(private db: AngularFirestore) { }

 ngOnInit(){
  this.missionsCol = this.db.collection('mission');
  // 直接把Observable赋值给missions，不用手动subscribe
  this.missions = this.missionsCol.valueChanges();
  // 如果需要在控制台打印数据，可以用tap操作符（推荐），或者保留subscribe但不要覆盖missions
  // this.missions.pipe(tap(data => console.log(data))).subscribe();
 }
}

2. 保持HTML代码不变

你的HTML代码是对的，async管道现在可以正确处理Observable了：

<ul *ngFor="let mission of missions | async">
 <li> {{ mission.cliente }} </li>
</ul>

额外说明 #

如果你确实需要手动订阅Observable（比如要在数据返回后做一些额外的业务处理），那HTML里就不能用async管道，直接遍历普通数组即可：

• 组件里：

missions: Mission[] = [];

ngOnInit(){
 this.missionsCol = this.db.collection('mission');
 this.missionsCol.valueChanges().subscribe((_missions: Mission[]) => {
  this.missions = _missions;
  console.log(this.missions);
 });
}

• HTML里：

<ul *ngFor="let mission of missions">
 <li> {{ mission.cliente }} </li>
</ul>

不过更推荐用async管道的方式，因为它会自动帮你管理订阅的生命周期，避免内存泄漏，代码也更简洁。

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