ngif Cannot read property 'shoulders' of null - ionic-framework

Question

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 that get the data in my view from my api but I get the above error, maybe I get data from api maybe the data will be null, when I console the value shoulders whthout data I get null
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 = {
shoulders: '',
hints: ''
};
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');
}
}
any help appreciate

Answer 1

You should use optional condition ('?.') if you are not sure condition is met.
Component:
export class ViewworkoutPage {
shoulders:any = {
shoulders: '',
hints: ''
};
Template:
<div ng-if="shoulders && shoulders?.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>

Answer 2

Finally I solve it with the below solution, also from ngif I was missed the *
<div *ngIf="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>