Question

我正在用Angular构建一个小型Webapp。

我查询一个Firestore数据库并获取数据。收到数据后，我必须显示它。但是，在我单击应用程序中的其他位置（或其他位置）之前，显示数据的应用程序区域不会刷新。

我正在为数据使用Observable，我有一个订阅者，该订阅者会在数据更新时触发（console.log），但是UI却没有。

我尝试过ChangeDetectorRef和detectChanges，直到用*ngIf准备好数据后才加载html

我有一个可以正确触发的订户方法

ngOnInit() {
  console.log("inited component.");
  obs$.subscribe(value => {
    console.log("Data List Update: (" + value.length + ") items in our dataset");
  })
}

在我的组件html文件中：

<div *ngFor="let item of obs$ | async; trackBy: trackByFn">
  <h2>{{item.name}}</h2>
</div>

我应该看到在调用订阅函数时立即填充html列表，但这不会发生，直到被另一个事件按角度刷新为止。

Answer 1

以为您只是误解了它的工作原理。

您需要分配所获得的值，以便html知道其中的内容。试试这个：

obs$.subscribe(value => {
  this.items = value;
  console.log("Data List Update: (" + value.length + ") items in our dataset");
})

<div *ngFor="let item of items">
  <h2>{{item.name}}</h2>
</div>

角度：从Firestore获取数据。在单击之前，HTML不会使用实时数据进行更新

1 个答案: