Question

我试图将firestore集合显示为html页面中的列表，首先，我从组件的列表中创建Observable，并且工作正常，但我意识到它应该在服务中，因此将代码更改为： / p>

在服务构造函数中：

this.tenantCollection = this.angularFirestore.collection('landlord').doc(this.user.uid).collection("tenants", ref => {
              return ref.orderBy('name')})
this.tenantsList = this.tenantCollection.valueChanges();

以及返回此Observable的函数（也在服务中）：

getTenants(){
  return this.tenantsList;
}

组件：

constructor(private landlordService: LandlordService, private router: Router, private route: ActivatedRoute,
    private angularFirestore: AngularFirestore, private auth: AuthService) {
   this.auth.user.subscribe(user => {
        if (user) {
            this.user = user;              
    this.landlordService.getTenants().subscribe(tenanes => {
        this.tenants = tenanes;
        console.log(this.tenants);
    });
        }
    });

html：

<app-tenant-item *ngFor="let t of tenants | async; let i= index" [tenant]="t" [index]="i">
    </app-tenant-item>

此列表总是空的，尽管有一些用这种方式存储的值（在我拥有用户之前，我将预订放在ngOnInit激活的构造函数中）。

如何解决它并实时获取更改？

Answer 1

此问题的原因是您手动订阅了landlordService.getTenants方法返回的可观察对象。所以现在，tenants变量保存原始数据，而不是可观察的数据。

您需要删除async管道：

<app-tenant-item *ngFor="let t of tenants; let i= index" [tenant]="t" [index]="i">
</app-tenant-item>

或将tenants变量分配给landlordService.getTenants方法返回的可观察对象，并保留模板中的async管道：

this.tenants = this.landlordService.getTenants();

首选第二种方法，因为您无需手动退订即可避免内存泄漏。有关更多信息：https://blog.angularindepth.com/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794。

如何从Firestore集合实时同步列表（组件+服务）

1 个答案: