CODEWITHSUNDEEP
htmlangular
Parthan_akon
Parthan_akon

Reputation: 239

ERROR TypeError: Cannot read property 'ID' of undefined (Angular 8)

Am always getting this error 'Cannot read property 'ID' of undefined' in my html code. But my the data from the api is perfectly loading, what do i do to resolve this error.(Angular 8)

I think this is occurring because my data is not getting loaded instantly and it is taking time, but eventually it is getting loaded. The error is showing in this line '*ngIf="!systemCheck && systemCheck && !canEdit"

<span *ngIf="!systemCheck && systemCheck && !canEdit">
              <button class="btn btn-primary" type="submit">
                Save
              </button>
            </span>


this.stakeholderService.getVendorStatus(this.statusID).subscribe(
      result => {
        console.log(result);
        if(!result){
          this.flag = false;
        }
        else {
          this.flag = true;

        let userRole = localStorage.getItem('role');
        if (userRole == AppConstants.SUPERADMIN_ROLE_NAME) {
          this.canEdit = true;
        }
        else {
          this.canEdit = false;
        }
        this.modelVendorStatus = result;

        this.color = result.colourCode;

        if (this.color != null && this.color != "" && this.color != undefined) {
          this.showBox = true;
        }

        this.systemCheck = result.isSystem;

        if(this.modelVendorStatus) {

        this.vendorStatusForm.patchValue({
          entityType: result.entityType,
          description: result.description,
          isDefault: result.isDefault,
          isSystem: result.isSystem,
          colourCode: result.colourCode,
          sortOrder: result.sortOrder,
          title: result.title,
        });
      }
      }
    },
      error => {
        this.errorMessage = error;
        if (error.status === 401)
          this.router.navigate(["/logout"]);
      });

The error goes like this

VendorStatusEditComponent.html:115 ERROR TypeError: Cannot read property 'ID' of undefined
    at Object.eval [as updateDirectives] (VM66404 VendorStatusEditComponent.ngfactory.js:555)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)
    at execComponentViewsAction (core.js:38670)
    at checkAndUpdateView (core.js:38383)
    at callWithDebugContext (core.js:39716)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:39299)
    at ViewRef_.detectChanges (core.js:27092)
    at ApplicationRef.tick (core.js:35380)

part where that I missed, sorry for that

<div *ngIf="modelVendorStatus.ID > 0">
      <div>
        <hr/>
      </div>
      <app-record-info [record]=modelVendorStatus></app-record-info>
    </div>

Upvotes: 2

Views: 5659

Answers (3)

Charly Sosa
Charly Sosa

Reputation: 575

You must add a ? after modelVendorStatus in html

instead of

<div *ngIf="modelVendorStatus.ID > 0">

try this

<div *ngIf="modelVendorStatus?.ID > 0">

Regards

Upvotes: 3

Yash
Yash

Reputation: 3576

Inside the Observable, you need to properly reference the properties, I am assuming that you are using it inside onInit like this, then you must use another variable to reference, eg:

ngOnInit(){

const that = this;  //inside subscribe use that instead of this

this.stakeholderService.getVendorStatus(this.statusID).subscribe(
      result => {
        console.log(result);
        ........
        ........
        that.systemCheck = result.isSystem; //here I've replaced this with that
        ........
        ........
       }
}

This is because inside the Observable, the this reference won't work so you need to create a reference to this.

Upvotes: 0

Poldo
Poldo

Reputation: 1932

Since your data is coming from observable you'll be needing async pipe in your html.

*ngIf="!(systemCheck | async) && !canEdit"

Upvotes: 0

Related Questions