如何为 [(ngModel)] 分配一个空/空/未定义的对象？角 4答案

【问题标题】：How to assign [(ngModel)] with an empty/null/undefined object? Angular 4如何为 [(ngModel)] 分配一个空/空/未定义的对象？角 4
【发布时间】：2019-01-14 05:10:35
【问题描述】：

我想将我的 .html 代码中的 [(ngModel)] 分配给一个空对象（null 或未定义），但它给出了 _co.object is null 的错误。 有两种情况，第一种是我的对象有价值，第二种是没有。第一种情况 ngModel 工作正常，但是当涉及到第二种情况时，它给出了为空的错误。我尝试使用 elvis(?) 运算符，但没有帮助。

问题解决了！！谢谢大家

我的 .ts 页面

profile: Profile = {

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

我的 .html 页面

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

ERROR TypeError: "_co.profile is null"

【问题讨论】：

_co在哪里？
用 *ngIf 保护它
这段代码没问题，请发布完整代码。
@AnkitAgarwal 我不知道 _co 是什么。它给出了一个引用“profile”对象的错误。
@Domi 你什么意思？如果我说 *ngIf="profile!=null" 那么它不会显示表单，但我需要填写表单才能将这些值提供给 'profile' 对象

标签： javascript angular firebase ionic3

【解决方案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>

如果出现编译错误，使用可选链时，需要将属性和事件出价分开

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

【讨论】：

蒂莫西，我了解确保获得房产的必要性，但您能否详细说明“意外问题” - 是否有任何我可以参考的记录清单？
@sikanderBabwani 角度最大的“意外问题”是blog.angular-university.io/angular-debugging。它可能会导致无限循环和许多其他问题。强烈建议自己了解它
使其成为可选会引发编译错误。可以在 ngModel 中使用选项
@zulkarnainshah 在这种情况下，您需要分离属性和事件绑定..

【解决方案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
   }
}

【讨论】：

【解决方案3】：

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

export class Foo {

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

【讨论】：

【解决方案4】：

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

例如，而不是

[(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;
}

【讨论】：

【解决方案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
  }
}

【讨论】：