Question

我正在调用邮政编码以解决API问题。我想在我的应用程序中显示地址列表。

public lookupAddresses: any = {};

要进行我正在使用的API调用：

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');  

this.http.get('https://api.getAddress.io/v2/uk/nn13er?api-key=my-api-key&format=true', {headers:headers}).map(res => res.json().Addresses).subscribe(data => {
    this.lookupAddresses = data
    console.log(data);
});

然后在我的模板中我有：

<ion-list>
    <ion-item *ngFor="let address of lookupAddresses">
        {{ address[0] }}
    </ion-item>         
</ion-list>

但是我收到了这个错误..

Error in ./RegisterPage class RegisterPage
caused by: Cannot find a differ supporting object 
'[object Object]' of type 'object'. NgFor only supports 
binding to Iterables such as Arrays.

如果我在console.log中获取数据的值，那么我就得到了这个结构。

Array[42]
0 : Array[5]
    0 : "10 Watkin Terrace"
    1 : ""
    2 : ""
    3 : "Northampton"
    4 : "Northamptonshire"
    length : 5
1 : Array[5]
    0 : "11 Watkin Terrace"
    1 : ""
    2 : ""
    3 : "Northampton"
    4 : "Northamptonshire"
    length : 5
2 : Array[5]
    0 : "12 Watkin Terrace"
    1 : ""
    2 : ""
    3 : "Northampton"
    4 : "Northamptonshire"
    length : 5      
....

Answer 1

不确定原因，但这解决了问题：

更改：

man -P'less +/SYSTEM' 5 crontab

要：

public lookupAddresses: any = {};

Answer 2

就像你在答案中所说，改变

public lookupAddresses: any = {};

到

public lookupAddresses: any;

解决了这个问题。原因是您将lookupAddresses的默认值设置为空对象，而不是数组，或者将其保留为未定义。

您的*ngFor尝试在http请求返回之前循环遍历lookupAddresses的元素，但由于{}不是数组，*ngFor失败并打印出错误。

如果您改为尝试了

行

public lookupAddresses: any = [];

它也可以工作，因为*ngFor处理一个空数组并且以相同的方式未定义，完全没有循环。

使用* ngFor显示有关对象错误的数组

2 个答案: