Question

我的html代码中总是出现此错误“无法读取未定义的属性” ID”。但是我的api数据已完美加载，我该怎么解决这个错误。（角度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

由于您的数据来自可观察的数据，因此您需要在html中使用异步管道。

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

Answer 2

在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 3

您必须在html中的 modelVendorStatus 之后添加？

代替

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

尝试

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

致谢

错误TypeError：无法读取未定义的属性“ ID”（角度8）

3 个答案: