Question

我正在Ionic 3中开发一个应用程序，我有一个名为profile的组件，其中包含有关从firebase登录的用户的信息，该组件位于选项卡上，可以在第一个选项卡中完美运行，但是当我更改选项卡时，请给我错误，无法读取null的属性'profileData'。为什么在第一个标签中可以正常工作而在第二个或第三个标签中不能正常工作？

我正在尝试安全操作员吗？但不起作用。

我的代码是：

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();
      }
      });
  })
}

}

错误：错误TypeError：无法读取null的属性'profileData'

Answer 1

我假设您需要调用 off（）以便取消订阅从数据库删除个人资料组件时所获得的数据。为此，您需要使用 ngOnDestroy（） angular的生命周期挂钩。代码示例：

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));
  }

}

希望有帮助。

无法在Angular中读取null属性

1 个答案: