Question

我的.ts文件中有以下代码。

yourInfoData: IYourInfoData; //IYourInfoData is my constructor

getYourInfoData() {
  $this = this;
  $this.yourInfoData = yourInfoDataResponse; //yourInfoDataResponseis my response from service.
}

yourInfoDataResponsestructure如下：

yourInfoDataResponse{
  "firstName" : "Xyz",
  "lastName" : "Abc"
}

我可以直接访问this.yourInfoData以与html输入值绑定，如下所示：

<input type="text" [(ngModel)]="yourInfoData.firstName">

这样做，我收到错误

找不到undefined的firstName。

有人能指出我在这里错过了什么。或者，还有其他方法可以实现这一目标。

Answer 1

如果你从服务中获得JSON，它可能是异步的，并且会延迟到达

当Angular在数据不可用时尝试解析模板绑定时，它会失败。

您可以使用安全导航（Elvis）操作符来避免错误

<!-- doesn't work 
  <input type="text" [(ngModel)]="yourInfoData?.firstName">
-->

请参阅此问题https://github.com/angular/angular/issues/7697

<input type="text" [ngModel]="yourInfoData?.firstName"
                   (ngModelChange)="yourInfoData.firstName=$event">

或者如果在设置yourInfoData之前模型发生变化

<input type="text" [ngModel]="yourInfoData?.firstName"
                   (ngModelChange)="yourInfoData ? yourInfoData.firstName=$event : null">

这也可行

<input type="text" *ngIf="yourInfoData" [(ngModel)]="yourInfoData.firstName">

但除非设置了yourInfoData，否则它不会显示输入。

Angular 2 - 我们可以将JSON对象直接从typescript文件绑定到html输入值吗？

1 个答案: