ОШИБКА TypeError: Невозможно прочитать свойство 'ID' из неопределенного (Angular 8)

Question

Я всегда получаю эту ошибку 'Не удается прочитать свойство' ID 'из неопределенного' в моем HTML-коде.Но мои данные из API прекрасно загружаются, что мне делать, чтобы устранить эту ошибку. (Angular 8)

Я думаю, что это происходит, потому что мои данные не загружаются мгновенно, и это требует времени, нов конечном счете это загружается.В этой строке отображается сообщение об ошибке '* 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"]);
      });

Ошибка выглядит так

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)

часть, где я пропустил, извинитеза это

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

Answer 1

Внутри Observable вам нужно правильно ссылаться на свойства, я предполагаю, что вы используете его внутри onInit, как это, тогда вы должны использовать другую переменную для ссылки, например:

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
        ........
        ........
       }
}

Это потому, что внутри Observable ссылка this не будет работать, поэтому вам нужно создать ссылку на нее.

Answer 2

Вы должны добавить ? после modelVendorStatus в html

вместо

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

. Попробуйте это

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

Привет

Answer 3

Поскольку ваши данные поступают из наблюдаемого, вам понадобится асинхронный канал в html.

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