Question

我试图将某些数据绑定到Angular 6中的select选项，为此我使用* NgFor：Json数据结构如下：

{  
   "addresses":[  
      {  
         "address":"xxxxxxx",
         "address_line1":"None",
         "address_line2":"None",
         "address_line3":"",
         "billing":false,
         "id":79,
         "name":"xxxxx",
         "phone_number":null,
         "postal_code":"xxxxx",
         "town":"xxxxx"
      },
   ]
}

因此要将其绑定到我的选择选项中，我正在这样做：

<option value="null" disabled="true" [selected]="true">Select your option</option>
<option *ngFor="let item of address" [value]="item">
    {{item.address}}
</option>

Ts文件获取数据：

customerAddress = []; 

private getCustomerAddress() {
    this.service.getCustomerAddress(this.customer_id).subscribe((data) => {
      console.log('Result - ', data);
      console.log('Customer address data is received');
      this.customerAddress = data;
    })
  }

与此链接的服务：

  getCustomerAddress(customerId): Observable<any> {
    return this.http.get<any>(this.customerAddressApiUrl + "/" + customerId)
      .pipe(
        catchError(this.handleError)
      );
  }

选择选项中没有显示数据？但是console.log中的数据很好。

Answer 1

这是正确的方法：

<option *ngFor="let item of customerAddress.addresses" [value]="item">
    {{item.address}}
</option>

Answer 2

客户满意的地址和地址

您正在浏览的数组的名称是customerAddress而不是adresses

无法将Web API中的数据绑定到Angular中的select选项

2 个答案: