Angular 可观察列表预处理

Question

我有一个 Angular12 应用程序，我使用 AngularFire 从 Firebase 实时数据库获取数据。因为我需要在我的代码中的不同位置使用我的数据，所以我希望我的 DAO 服务获取 firebase Observable 列表，并在其中进行少量预处理（将字符串日期转换为 Date 对象）。如果我进行此预处理，那么我将失去订阅能力，现在我的应用程序无法获得实时数据的好处。所以我想使预处理 return 成为一个 Observable 列表，但我不知道该怎么做。

我的代码：

FantaroiDAOService

  private list = this.db.list<Fantaros>('fantaroi')

  constructor(private db: AngularFireDatabase){}

  public getIpir() {
    return this.list.valueChanges();
  }

应用组件

  ngOnInit(): void {
    let fantaroi: Fantaros[] = [];
    this.dao.getIpir().subscribe(f => {
      fantaroi = f.map(f => {
        const soc = f.soc.map(date => new Date(date))
        const dishes = f.dishes? f.dishes.map(date => new Date(date)) : []
        const off = f.off.map(date => new Date(date))
        return new Fantaros(f.name, soc, dishes, off);
      })
// other Component related code.
});
}

fantaroi 是我要监视更改的列表，然后用它来更新我的视图。有没有办法做到这一点？或者我是否必须在我使用该列表的每个地方复制粘贴解析为 Date 对象的代码？

Answer 1

您应该能够使用 pipe 并使用 map 运算符应用转换：

public getIpir() {
  return this.list.valueChanges().pipe(
    map(fantaroi => fantaroi.map(f => {
      const soc = f.soc.map(date => new Date(date))
      const dishes = f.dishes? f.dishes.map(date => new Date(date)) : []
      const off = f.off.map(date => new Date(date))
      return new Fantaros(f.name, soc, dishes, off);
    })
  );
}

Angular 可观察列表预处理

Angular Observable list preproccess

observable

web

typescript

angular

FantaroiDAOService

应用组件