Question

我刚刚学习了firebase，我似乎在理解它如何与Observables一起工作时遇到了麻烦。如果我有一个利用服务ItemDetailComponent访问firestore文档的组件ItemService，为什么此代码仅在文档存在时返回null？

这是组件的onInit：

  ngOnInit() {
    this.item$ = this.route.paramMap
    .switchMap((params: ParamMap) => {
      return this.service.getItem(params.get('id'));
    });
    // this works when accessed from the template
    this.forcedItem$ = this.afs.doc('items/oll71FoVdq0wpLAM85HO').valueChanges();
  }

以下是服务方法：

  getItem(ItemId: string | number) {
    this.ItemDoc = this.afs.doc<any>(`items/${itemId}`);
    return this.ItemDoc.valueChanges();
  }

这是组件的模板：

  <span>Doesn't work: {{item$ | async | json}}</span>
  <hr/>
  <span>works: {{forcedItem$ | async | json}}</span>

与Angular文档的唯一区别是我返回Observable而不是POJO。

  ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes(); // This returns a POJO, I'm returning an Observable
      });
  }

在任何情况下，switchMap在我的情况下都不会返回null以外的任何内容。有人可以解释这个区别吗？

Answer 1

使用Obervable捕获参数，然后从其中进行Firestore调用

在构造函数上定义ActiveRoute：

constructor(private route: ActivatedRoute) {}

现在去获取您的路线参数，然后致电您的服务

ngOnInit() {
    this.route.params.subscribe(params => {
           this.item$ = this.service.getItem(params['id']); 
    });
}

如何通过服务使用路由参数向组件提供AngularFirestoreDocument？

1 个答案: