InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”但控制台提供了 Observable？答案

【问题标题】：InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' but console gives Observable?InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”但控制台提供了 Observable？
【发布时间】：2018-11-02 20:12:56
【问题描述】：

我对 firebase 和 rxjs 还是很陌生，但这仍然没有进入我的脑海：

我通过服务对我的 firestore 数据库进行了简单查询

chat.service.ts：

chatsCollection: AngularFirestoreCollection<Chat>;
  chats: Observable<Chat[]>;

  constructor(private db: AngularFirestore) {
  }

  getChats(): Observable<Chat[]> {
    this.chatsCollection = this.db.collection('chats');
    return this.chatsCollection.valueChanges();
  }

chat.component.ts：

  chats: Observable<Chat[]>;
  constructor(private router: Router, public chatService: ChatService) { }

  ngOnInit() {
    this.chats = this.chatService.getChats();
    console.log(this.chats);
  }

chat.component.html：

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Your Chats</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-selection-list #chats>
      <h3 mat-subheader>Chats</h3>
      <mat-list-option *ngFor="let chat of (chats | async)" (click)="handleClick(chats)" [value]="chat.id">
        <img matListAvatar src="./assets/avatar.svg" alt="Avatar Icon">
        <h3 mat-line>{{chat.name}}</h3>
        <p mat-line>test</p>
      </mat-list-option>
    </mat-selection-list>
  </mat-card-content>
</mat-card>

现在的问题是异步管道在获取对象而不是可观察对象时抛出错误，但我之前记录它并说它是可观察对象？此外，如果我订阅它（用于测试），它会返回我想要的值。

提前感谢您的帮助！

使用的版本：

rxjs：6.3.3 角7 火力基地：5.5.6

【问题讨论】：

您介意添加更多有关您当地环境的信息吗？例如 angular、rxjs 等版本
尝试在括号中使用 let chat of ( chats | async ) 否则尝试再次重启您的应用
@Suryan 不能同时工作
您的代码是正确的，唯一无法正常工作的方法是因为它没有抱怨特定的async 管道。你能发布整个chat.component.html，尤其是第8行:)
@PierreDuc 第 8 行是带有 *ngFor 行的行，无论哪种方式，我现在都粘贴了所有代码。

标签： javascript angular typescript google-cloud-firestore

【解决方案1】：

问题在于 mat-selection-list 上的 #chats。它正在覆盖模板内的组件chats 变量。将该名称重命名为其他名称，然后您就可以开始了。

<mat-selection-list #chatList>

【讨论】：

@filip 也花了我一段时间：D
哇...好眼睛