AngularFire - 如何将 firestore 文档映射到 valueChanges 上的数组？

Question

在我的 angular web 应用程序中，我使用 angularfire 库与 firestore 进行交互。

在组件的构造函数中，我想订阅文档集合，并在触发值更改函数时将文档映射到数组。

我可以使用提供的语法轻松地在前端显示列表。

//component constructor
constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
    this.items = this.itemsCollection.valueChanges();
  }


//component template
<ul>
  <li *ngFor="let item of items | async">
    {{ item.name }}
  </li>
</ul>

但是，我需要该集合中文档的数组（或对象），因为我需要执行一些逻辑来呈现其他内容。 例如，我有一个“isChecked”函数，它根据该文档集合中是否存在某个项目来决定是否选中复选框。

async isChecked(itemID) {
    if(items[itemID]) {
     return true;
     } else {
     return false 
     }
}

那么，如何将文档获取到另一个变量并在 valueChanges 上保持更新？

Answer 1

this.itemsCollection.valueChanges()
.pipe(
  tap(res => {
   this.items = res;
  })
)
.subscribe();

并且在需要从 html 中删除异步管道之后，在这种情况下，您将能够将项目用作对象或数组，而不是可观察的，也许对您来说会更容易。 也不要忘记在 ngOnDestroy 中取消订阅

Answer 2

你可以使用 rxjs 地图操作符

this.items = this.itemsCollection.valueChanges().pipe(map (res) => ... );