CODEWITHSUNDEEP
angulartypescriptfirebaseionic-frameworkfirebase-realtime-database
Juanma Perez
Juanma Perez

Reputation: 97

Cannot read property of null in Angular

I am develop an app in Ionic 3, I have a component named profile that have information about the user logged from firebase, this component are on tabs, work perfectly in the first tab, but when I change the tab, give me an error, cannot read property 'profileData' of null. Why in the first tab work correctly and the second or third not?

I am try the safety operator ? but doesn't work.

My code is:

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

}

The error: ERROR TypeError: Cannot read property 'profileData' of null

Upvotes: 0

Views: 2199

Answers (1)

Amir Arbabian
Amir Arbabian

Reputation: 3699

I assume that you need to call off() to unsubscribe from getting data from database when your profile component is being removed. To do that you need to use ngOnDestroy() angular's lifecycle hook. Code example:

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

}

Hope that helps.

Upvotes: 2

Related Questions