Question

我想将.html代码中的[（ngModel）]分配给一个空（空或未定义）的对象，但是它给出 _co.object为空的错误。 有2种情况，第一种情况是我的对象具有值，第二种情况是没有值。第一种情况ngModel可以正常工作，但是第二种情况下，它给出了为null的错误。我尝试过使用elvis（？）运算符，但无济于事。

问题已解决！！谢谢大家

我的.ts页面

个人资料：个人资料= {

      fullName: '',
      email: '',
      address: '', 
  };

我的.html页面

<ion-item>
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile.fullName"></ion-input>
</ion-item>

错误类型错误：“ _ co.profile为空”

Answer 1

您始终需要确保获取对象的属性。否则将来您可能会遇到意想不到的问题。

要么使用ngIf

<ion-item *ngIf="profile">
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile.fullName"></ion-input>
</ion-item>

或使其可选

<ion-item>
  <ion-label>Full Name:</ion-label>
  <ion-input [(ngModel)]="profile?.fullName"></ion-input>
</ion-item>

Answer 2

谢谢你们。我发现我的错误是在另一个地方。我以某种方式将 ngOnInit 中的“配置文件”对象从空重新分配为未定义。像这样：

ngOnInit(){  
//code...
 if(!this.profile){
      this.profile = {} as Profile; //here was the mistake which I accidentally made.
      //and it was assigning my object to null
   }
}

Answer 3

声明配置文件时，应添加所有子项，这将阻止其未定义。

export class Foo {

public profile:any = { 
        fullName='',
        foo = '',
        bar = ''
      }

Answer 4

当绑定到可为空的对象的属性时，可以通过创建setter和getter并绑定到该属性别名来防止对象为null时出错。

例如，代替

[(ngModel)]="model[`${this.field.key}_selectedObject`]"

更改为

[(ngModel)]="fieldModel"

然后在您的ts代码中添加

public get fieldModel(): any  {
   if (!this.model) return null;
   return this.model[`${this.field.key}_selectedObject`];
}
public set fieldModel(value: any) {
   if (!this.model) return;
   this.model[`${this.field.key}_selectedObject`] = value;
}

Answer 5

对于任何在 angular 10+ 上遇到此错误的人。在您的 tsconfig 文件中执行此操作

  "strict": true,
  "strictNullChecks": false

然后这是一个如何在属性绑定中使用它的示例

<div>
  <label>Street Address</label>
    <input type="text" class="form-control" name="street"
   [(ngModel)]="user.address.street">
</div>

假设你的模型是这样的

User {
 address?: {
    street?: string,
    city?: string,
    province?: string
  }
}

如何为[（ngModel）]分配一个空/空/未定义的对象？角度4

5 个答案: