在加载页面上检查缺少的元素

Question

使用角度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中可能缺少该成员，在这种情况下，角形表示抱怨加载。我试着用

* Qazxswpoi“

ngIf="dataObj.member

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

dataObj从服务api返回。

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

Answer 1

您可以尝试以下庄园处理。

解

    ngOnInit() {
        this.getObj(); 
      }

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

说明

这应该在访问它们之前检查两个值并且没有错误，如果它们不存在，则不会插入

<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>应该在dataObj生命周期钩子内完成，该钩子在初始化视图之前运行，这应该有助于未在视图中定义的值。这样与ngOnInit的检查只是一个预防措施。

编辑

&&

刚刚在控制器中注意到你正在使用

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。此处的编辑对两者使用相同的内容。确保做山姆。

Answer 2

你可以用这种方式使用它

dataObj

这将把它作为可选字段，如果dataObj没有成员或名称，它将跳过它