Не удается прочитать свойство null в Angular

Question

Я занимаюсь разработкой приложения для Ionic 3, у меня есть компонент с именем profile, в котором есть информация о пользователе, зарегистрированном с firebase, этот компонент находится на вкладках, отлично работает на первой вкладке, но когда я меняю вкладку, выдаетошибка, невозможно прочитать свойство 'profileData' из null.Почему в первой вкладке работают правильно, а во второй или третьей нет?

Я пытаюсь быть оператором безопасности?но не работает.

Мой код:

profile.html

<div>
  <ion-item no-lines class="user" *ngFor="let data of profileData">
    <img class="user-img" src="../../assets/imgs/logo.png" />
    <h4>Nombre: {{ data.name }}</h4>
    <h4>Siguiendo: {{ data.followQuantity }}</h4>
    <h4>Puntos: {{ data.points }}</h4>
  </ion-item>
</div>

profile.ts

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from 
'@angular/core';
import * as firebase from 'firebase';
import { AngularFireDatabase, AngularFireList } from 
'angularfire2/database';

@Component({
  selector: 'profile',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'profile.html'
})
export class ProfileComponent {

 profileRef: AngularFireList<any>;
 profileData: any;


 constructor(private database: AngularFireDatabase, private 
   cdRef:ChangeDetectorRef) {
   console.log("Constructor")
   var ref = firebase.database().ref('/users/');
   ref.on('value', (snapshot) => {
    snapshot.forEach((child) => {
      if(child.val().UID == firebase.auth().currentUser.uid){
        console.log("Usuario logueado")
        console.log(snapshot)
        this.profileData = [{
          name: child.val().name,
          lastname: child.val().lastname,
          phone: child.val().phone,
          direction: child.val().direction,
          followQuantity: child.val().followQuantity,
          points: child.val().points,
          sex: child.val().sex,
        }];
        this.cdRef.detectChanges();
      }
      });
  })
}

}

Ошибка: ОШИБКАОшибка типа: не удается прочитать свойство 'profileData' с нулевым значением

Answer 1

Я предполагаю, что вам нужно вызвать off () , чтобы отписаться от получения данных из базы данных , когда компонент вашего профиля удаляется .Для этого вам нужно использовать ngOnDestroy () angular's lifecycle hook.Пример кода:

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from 
'@angular/core';
import * as firebase from 'firebase';
import { AngularFireDatabase, AngularFireList } from 
'angularfire2/database';

@Component({
  selector: 'profile',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: 'profile.html'
})
export class ProfileComponent {

 profileRef: AngularFireList<any>;
 profileData: any;
 ref: any;


 constructor(private database: AngularFireDatabase, private cdRef:ChangeDetectorRef) {
   console.log("Constructor")
   this.ref = firebase.database().ref('/users/');
   this.ref.on('value', this.onUsersFetch.bind(this));
 }

 private onUsersFetch(snapshot) {
    snapshot.forEach((child) => {
      if(child.val().UID == firebase.auth().currentUser.uid){
        console.log("Usuario logueado")
        console.log(snapshot)
        this.profileData = [{
          name: child.val().name,
          lastname: child.val().lastname,
          phone: child.val().phone,
          direction: child.val().direction,
          followQuantity: child.val().followQuantity,
          points: child.val().points,
          sex: child.val().sex,
        }];
        this.cdRef.detectChanges();
      }
      });
  }

  ngOnDestroy() {
      this.ref.off('value', this.onUsersFetch.bind(this));
  }

}

Надеюсь, это поможет.