Angular: получение данных из Firestore.HTML не обновляется данными в реальном времени, пока не нажата

Question

Я создаю небольшое веб-приложение с Angular.

Я запрашиваю базу данных пожарного магазина и получаю данные обратно.Как только я получу данные, я должен их отобразить.Однако область приложения, отображающая данные, не обновляется до тех пор, пока я не щелкну в другом месте (или в другом месте) в приложении.

Я использую Observable для данных, и у меня есть подписчик, который получаетсрабатывает при обновлении данных (console.log) - однако пользовательский интерфейс отсутствует.

Я пробовал ChangeDetectorRef и detectChanges и не загружал HTML, пока данные не будут готовы с *ngIf

У меня есть метод подписчика, который корректно срабатывает

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 заполняется немедленнокогда вызывается функция подписки, но этого не происходит до тех пор, пока она не будет обновлена ​​angular другим событием.

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>