Question

我遇到了一个问题，现在当我启动我的应用程序时，我会有一个异步调用。

getData() {
   this._dataService.getData().subscribe((result) => {
     this.data = result
   })
}

现在我取回的数据看起来像这样

data = {
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null,
    etc..
}

现在在我的HTML中，我正在这样做。

<input [(ngModel)]="data.value1" />
<input [(ngModel)]="data.value2" />

等等。

因此，当我运行我的应用程序时，出现错误，提示无法绑定到未定义，这意味着页面呈现数据时尚未检索到

现在通常我会做这样的事情...

<input [(ngModel)]="data?.value2" />

但我收到此错误Parser Error: The '?.' operator cannot be used in the assignment

这附近还有吗？

我真的不想执行以下操作

setData() {
   this.value1 = this.data.value1;
   etc...
}

Answer 1

尝试将输入内容包装在*ngIf="data"中。

<form *ngIf="data">
    <input [(ngModel)]="data.value1" />
    <input [(ngModel)]="data.value2" />
</form>

Answer 2

我认为您首先需要初始化数据对象。

data = {
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null, 
}

getData() {
   this._dataService.getData().subscribe((result) => {
     this.data = result
   })
}

Answer 3

您必须检查getData方法。结果对象可以不确定。您必须先检查一下。使用浏览器中的console.log或“网络”选项卡，然后检查响应。

getData() {
   this._dataService.getData().subscribe((result) => {

     console.log(result)
     this.data = result 

   })
}

不过，您只需执行此操作即可。这会起作用，但不是正确的方法。

getData() {
   this._dataService.getData().subscribe((result) => {


     this.data = result?result:this.data 

   })
}

ngModel无法绑定到异步属性Angular

3 个答案: