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

我正在打电话到一个邮政编码地址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>

如果我使用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      
....

---

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

更改：

public lookupAddresses: any = {};

致：

---

就像你在回答中说的，改变

public lookupAddresses: any = {};

到

解决了这个问题。原因是您正在将

lookupAddresses

的默认值设置为空对象，而不是数组，或者未定义它

在http请求返回之前，您的

*ngFor

尝试在

lookupAddresses

元素之间循环，但由于

{}

不是数组，因此

*ngFor

失败并打印出错误

如果你试着去排队

public lookupAddresses: any = [];

---

它也可以工作，因为

*ngFor

以相同的方式处理空数组和未定义数组，根本不循环。

太好了，感谢您分享您的知识。非常有帮助！

public lookupAddresses: any = {};

public lookupAddresses: any;

public lookupAddresses: any = [];