时间戳

首页 > 解决方案 > 检查加载页面上的缺失元素

angular - 检查加载页面上的缺失元素

问题描述

使用 Angular 7，表格如下所示

<mat-form-field>
    <textarea  matInput 
        [(ngModel)]="dataObj.member.name" 
            name="memberId" disabled></textarea>
</mat-form-field>

dataObj正在保存所有数据，如下所示

{
"somekey": "someValue"
"id": "5c7abba",
  "member": {
    "name": "test",
    "id": "5c76de28"
  }
}

有时，成员可能会从 dataObj 中丢失，在这种情况下，角度形式会抱怨加载。我试着用

* ngIf="dataObj.member"

<mat-form-field>
    <textarea  matInput *ngIf="dataObj.member"
        [(ngModel)]="dataObj.member.name" 
            name="memberId" disabled></textarea>
</mat-form-field>

但这不起作用。想要实现，如果会员缺失，表格显示空白归档

dataObj 从服务 api 返回。

    ngOnInit() {
        this.getObj(); 
      }

  getObj() {
    const id = this.route.snapshot.params.id;
    this.objService.getObj(id)
      .subscribe(obj => this.obj = obj);
  }

标签： angular

解决方案

您可以尝试在以下庄园进行处理。

解决方案

<div *ngIf="dataObj && dataObj.member">
  <textarea  matInput 
    <mat-form-field>
      [(ngModel)]="dataObj.member.name" name="memberId" disabled>
    </mat-form-field>
  </textarea>
</div>

解释

这应该在访问它们之前检查这两个值是否存在，并且不会出现错误，如果它们不存在，<mat-form-field>则不会插入，因此不会尝试访问会导致错误的未定义字段。

我建议在初始化视图之前运行的ngOnInitdataObj生命周期钩子中完成填充的任何操作，这应该有助于视图中未定义的值。这样，检查只是一种预防措施。&&

编辑 

public dataObj = {}; 

public ngOnInit(): void 
{
    const id = this.route.snapshot.params.id;

    this.objService.getObj(id).subscribe(obj => 
    {
        this.dataObj = obj;
        console.log(this.dataObj); // can check values here.
    });
}

刚刚在您正在使用的控制器中注意到，this.obj但在您正在使用的模板中dataObj。此处的编辑对两者都使用相同的内容。确保做山姆。

推荐阅读