Ngif Cannot read property 'shoulders' of null

Ionic Framework ionic-v3
1

I have the below table but I should check if the variable is null so I will not print the table , but I try the below and I get the error Cannot read property ‘shoulders’ of null

<div ng-if="shoulders!=null">
<ion-label color="danger" ><b>Shoulders</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">
      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid></div>

Also I try and this

<div ng-if="shoulders">
<ion-label color="danger" ><b>Shoulders</b></ion-label>
<ion-grid>
    <ion-row text-wrap>
        <ion-col width-25 >Exercises</ion-col>
        <ion-col width-25 >Machine ID</ion-col>
        <ion-col width-25 >Days</ion-col>
        <ion-col  width-25>Hints</ion-col>
      </ion-row> 
    <ion-row text-wrap *ngFor="let exercise of shoulders.shoulders |keys">
        <ng-container  *ngFor="let machine of MachinesDetails "> 
            <ng-container  *ngIf="machine.machine_no == exercise.key">
      <ion-col > {{machine.name}}</ion-col>
      <ion-col > {{machine.machine_no}}</ion-col>
    </ng-container >
    </ng-container >
      <ion-col > {{exercise.value}}</ion-col>
      <ng-container  *ngFor="let hints of shoulders.hints[exercise.key] |keys ">        
          <ion-col > {{hints.value}} </ion-col>
    </ng-container >
    </ion-row>
  </ion-grid></div>```

Component


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PipeTransform, Pipe } from '@angular/core';
import {KeysPipe} from '../../pipes/keys/keys';
import { RestProvider } from '../../providers/rest/rest';

/**
 * Generated class for the ViewworkoutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more         
 info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-viewworkout',
  templateUrl: 'viewworkout.html',
})
export class ViewworkoutPage {
  workout:any;
  workoutDetails:any;
  chest:any;
  back:any;
  shoulders:any;
  bitriceps:any;
  legs:any;
  absback:any;
  free:any;
  notes:any;

  MachinesDetails:any;

  Machines() {

    this.restProvider.getMachines()
    .then(data => {
      this.MachinesDetails = data;
      console.log(this.MachinesDetails);
    });
  }


  constructor(public navCtrl: NavController, public navParams:     
  NavParams,public restProvider: RestProvider) {
    this.workout = navParams.get('data');
    this.workoutDetails = this.workout.workout;
    this.chest = this.workout.chest;
    this.back = this.workout.back;
    this.shoulders = this.workout.shoulders;   
    console.log(this.shoulders);

    this.bitriceps = this.workout.bitriceps;
    this.legs = this.workout.legs;
    this.absback = this.workout.absback;
    this.free = this.workout.free_exercises;
    this.notes = this.workout.notes;

    this.Machines();



  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ViewworkoutPage');
  }

}
2

What’s the output of

console.log(this.shoulders);

Also, try replacing

let exercise of shoulders.shoulders

with the following (note the question mark)

let exercise of shoulders?.shoulders

3

I disagree with the advice in the previous post. Ensuring properties that are accessed by templates are always in a sane state is the responsibility of the controller, not the template. As for OP: stop abusing any, don’t use kebab-case for *ngIf, and never compare explicitly against null; instead use truthiness.

4

In the 2nd sample i don’t compare, can you explain ke what do you mean or give me example