Question

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

2018-08-07

26618

javascript angular firebase ionic3

我想将 .html 代码中的 [(ngModel)] 分配给一个为空（null 或未定义）的对象，但它给出了错误 _co.object 为 null。 有两种情况，第一种是我的对象有值，第二种是没有值。第一种情况 ngModel 工作正常，但第二种情况，它给出了为 null 的错误。我尝试使用 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>

错误 TypeError：“_co.profile 为 null”

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>

如果您遇到编译错误，则在使用可选链时，您需要分离属性和事件出价

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

Answer 2

谢谢大家。我发现我的错误在其他地方。我不知何故将 ngOnInit 中的“profile”对象从空重新分配给了未定义。像这样：

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 = ''
      }