Undefined Error

ERROR TypeError: Cannot read property ‘proctoring’ of undefined.

Please guide.

<ion-title mode="md">{{ 'addon.skills.skills' | translate}}</ion-title>
<img [src]="competency.badgeSafe" [alt]="competency.shortname">

<h1 text-center>{{competency.shortname}}</h1>

<p class="subtitle" text-center>-</p>
<ion-grid no-padding>

  <ion-row>

    <ion-col col-6 text-center>

      <ion-title>{{ 'addon.skills.status' | translate }}</ion-title>

      <p text-center padding></p>

    </ion-col>

    <ion-col col-6 class="all_border" text-center>

      <ion-title>{{ 'addon.skills.score' | translate }}</ion-title>

      <p text-center padding>{{competency.grade}}</p>

    </ion-col>

  </ion-row>

</ion-grid>
<h2 align-items-start >{{ 'addon.skills.description' | translate }}</h2>

<p text-wrap text-justify [innerHTML]="competency.description"></p>
<h2 align-items-start >{{ 'addon.skills.proctoring' | translate }}</h2>

<p text-wrap text-justify *ngIf="competency.proctoring">This assessment will be proctored.</p>

<p text-wrap text-justify *ngIf="!competency.proctoring">This assessment will not be proctored.</p>
<ion-row>

  <ion-col><button type="submit" color="primary" [disabled]="!competency.courseid" (click)="goToTraining(competency.courseid)" ion-button block class="br-5">{{ 'addon.skills.training' | translate }}</button></ion-col>

  <!-- <ion-col><button type="submit" color="light" [disabled]="!(competency.cmid && competency.courseid)" (click)="goToTestOut(competency.cmid, competency.courseid)" ion-button block class="br-5">{{ 'addon.skills.testout' | translate }}</button></ion-col> -->

</ion-row>

The error is what it says is happening. You are trying to address prodctoring property from an object (either competency or addon.skills) which is currently undefined.

So one these two items (or both) need to have value before you can address their attributes

Assure they have a value before the template is rendered (or avoid them getting cleared while the template is shown).

Ideally in the class definition, otherwise in the constructor and not later than ngOninit

…and while we’re at it, you probably don’t want to be using innerHTML. HTML makes a terrible domain-specific language, because it’s so complicated to process. Use a JSON dialect instead. Also, in a couple of days, you’ll be asking why hyperlinks and so on don’t work in your injected HTML.