如何利用可观测的角度ngFor

Question

book类定义为：

class Book {
   id: number;
   name: string;
   constructor(id: number, name: string) { 
     this.id = id;
     this.name = name;
  }
}

我继续创建observable对象books$:

const book1: Book = new Book(1, "Title 1");
const book2: Book = new Book(2, "Title 2");
function booklist(observer) {
  observer.next(book1);
  observer.next(book2);
  observer.complete();
  return {unsubscribe() {}};
}
this.books$ = new Observable(booklist);

使用以下工具进行检查：

this.books$.subscribe(each => console.log(each));

打印：

Book {id: 1, name: "Title 1"}
Book {id: 2, name: "Title 2"} 

但是在html模板中使用ngfor可以观察到：

<ul>
  <li *ngFor="let book of books$ | async" >
    Id: {{book.id}}, Name: {{book.name}}
  </li>
</ul>

引发错误:

   Error: Cannot find a differ supporting object '[object Object]' of type 'Title 2'. NgFor only supports binding to Iterables such as Arrays.

如何解决这个问题？这里是Stackblitz项目的链接：

https://stackblitz.com/edit/Angular-ivy-isebs7？file=src%2fapp%2fapp.component.ts

Answer 1

除了books$表示一个对象流，而不是数组之外，所有东西看起来都很好。因此可能必须使用keyvalue管道。请尝试以下操作

html prettyprint-override"><ul>
  <ng-container *ngIf="(books$ | async) as books">
    <li *ngFor="let book of books | keyvalue" >
      {{book.key}}: {{book.value}}
    </li>
  </ng-container>
</ul>

但是，上述解决方案只打印当前通知。如果您希望收集每个通知并显示所有通知，可以使用RxJSbuffercount（如果您不确定通知的数量，则使用buffer)运算符收集所有通知。

控制器

import { bufferCount } from 'rxjs/operators';  

ngOnInit(): void {
  ...
  this.books$ = <Observable<Book[]>>(new Observable(booklist).pipe(bufferCount(2)));
  this.books$.subscribe(each => console.log(each));
}

模板

<ul>
  <ng-container *ngFor="let books of books$ | async">
    <li *ngFor="let book of books | keyvalue" >
      {{book.key}}: {{book.value}}
    </li>
  </ng-container>
</ul>

我修改了你的Stackblitz