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中丢失，在这种情况下，会倾倒加载角形。我尝试用

修复

* {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);
  }

Answer 1

您可以通过这种方式使用

 [(ngModel)]="dataObj?.member?.name"

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

Answer 2

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

解决方案

<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，但在模板中正在使用dataObj。此处的编辑对两者都使用相同的内容。确保做山姆。

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

2 个答案: