InvalidPipeArgument: '[объект объекта]' для канала 'AsyncPipe', но консоль дает Observable?

Question

Я довольно плохо знаком с firebase и rxjs, но это все еще не приходит мне в голову:

Я делаю простой запрос к своей базе данных пожарного магазина через Службу

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 Angular7 база огня: 5.5.6

Answer 1

Проблема в #chats в списке выбора матов. Он перезаписывает ваши компоненты chats переменную внутри шаблона. Переименуйте его во что-то другое, и все готово.

<mat-selection-list #chatList>