ngif не загружается после того, как я иду на другой маршрут

Question

Здравствуйте, я пытаюсь прочитать данные с угловым 6 из firestore (firebase), и когда я открываю компонент в первый раз, его загрузка и работает хорошо, но когда я иду в другой компонент и обратно его не загружается и показывает мне nodata #

<div *ngIf="arr?.length > 0 ;else noData">
  <ul *ngFor="let item of arr" class="list-group">
  <li class="list-group-item">
  <strong>{{item.displayName}}{{item.email}}</strong></li>
  </ul>
  </div>
  <div class="container">
  <ng-template #noData>
  <hr>
  <h5>There are no users to display</h5>
  </ng-template>
  </div>

ts component

    arr: User[] = [];
  constructor(
     public _data: AuthService,
  ) { }
  ngOnInit() {
    this._data.getUsers().subscribe(
      (user: User[]) => {
      this.arr = user;
      // console.log(this.arr);
      }
      );
  }
}

service

this.users = this.afs.collection('users').snapshotChanges().map(
    changes => {
    return changes.map(
    a => {
    const data = a.payload.doc.data() as User;
    data.uid = a.payload.doc.id;
    return data;
    });
    });


  this.user = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        this.userId = user.uid;
        localStorage.setItem('userID', user.uid);


        return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
      } else {
        return Observable.of(null);
      }
    })
);

 getUsers() {
  return this.users;
 }

мой английский не так хорош, поэтому я пытаюсь объяснить снова, когда я пытаюсь в первый раз открыть компонент егозагрузить все значения и работать хорошо, когда я перехожу к другому компоненту и возвращаюсь к своему компоненту, на нем ничего не отображается, просто "Нет пользователей для отображения", как я могу это исправить?

Answer 1

Попробуйте добавить .share () к вашему сервису. Это позволит вашей службе по существу кэшировать данные, полученные из базы данных, и затем должно исключить любые http-запросы, если данные не изменились.

Услуги:

this.users = this.afs.collection('users').snapshotChanges().map(
    changes => {
      return changes.map(
        a => {
           const data = a.payload.doc.data() as User;
           data.uid = a.payload.doc.id;
           return data;
    })**.share()**;
});