Данные не обновляются в Angular при получении из базы данных Firebase RealTime

Question

HTML Содержимое обновляется, когда я предоставляю данные о состоянии c из firedb.service.ts, но когда я получаю данные из firebase, я не могу отобразить содержимое.

Для отладки я дал как данные о состоянии c, так и данные о базе данных. Таким образом, данные c отображаются, но данные базы данных, которые регистрируются на консоли, никогда не достигают html страницы.

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

firedb.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { of } from 'rxjs'; 

@Injectable({
  providedIn: 'root'
})

export class FiredbService {
  constructor(private firestore: AngularFireDatabase) { }
  public getMovies(){
    let movies;
    let dbref = this.firestore.database.ref();
    dbref.once('value', function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
        movies = childSnapshot.val();
        console.log(movies); //This prints last but page doesnt refresh
      });
    });
    console.log("Before Return") //This prints first
    console.log(movies); //This prints second as undefined
    movies = [{"title":"Inception","year":"2010"},{"title":"Inception","year":"2010"}];
    return of(movies);
  }
}

mov ie -list .component.ts

import { Component, OnInit } from '@angular/core';
import { FiredbService } from '../firedb.service';

@Component({
  selector: 'movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})

export class MovieListComponent implements OnInit {
  movies;
  constructor(private firestore: FiredbService) { }
  ngOnInit() {
    this.firestore.getMovies().subscribe(data => this.movies = 
      data);
    console.log("Inside Component"); //This prints third
    console.log(this.movies);  //This prints fourth, static content from firedb.service
  }
}

Консоль отладчика

Before Return      (from firedb.service)
undefined          (from firedb.service)
Inside Component   (from the movie-list.component)
[{…}, {…}]         (from the movie-list.component)
[1: {…}, 2: {…}, 3: {…}, 4: {…}, ......., 10000:{…}]  (from firedb.service)

Answer 1

Это из-за angular стратегии обнаружения изменений. Вам необходимо импортировать ChangeDetectorRef из @ angular / core в компоненте. Затем вам нужно добавить это из конструктора. Как только вы получите данные из firebase, вам нужно вызвать метод deteChanges ().

Пример кода конструктора

constructor(
    private _changeDetectionRef: ChangeDetectorRef
    ) 
    {

     }

Пример вызова HTTP с обнаружением изменений

getPractices() {

    this._clientService.getList(0, 100)
      .subscribe(result => {

        if (result != null && result.items.length > 0) {
          this.practices = result.items;
        }
       this._changeDetectionRef.detectChanges();
      })
  }