如何在 Angular 中重复这样的列表？尤其是带有多个属性名称的答案

【问题标题】：How to repeat a list like this in Angular? Especially with a number of preperty name如何在 Angular 中重复这样的列表？尤其是带有多个属性名称的
【发布时间】：2019-02-12 10:16:04
【问题描述】：

例如，

this.cityService.getCityByCountryId(this.defaultUserNationality, 

    1).subscribe(data => {
          this.cities = data;      
        });

并在 html 文件中尝试显示如下：

<div class="alert alert-warning">{{cities['0'] | json}}</div>

因为它会抛出错误：

无法读取未定义的属性“0”

{
  "success": true,
  "remaining_lookups": 9961,
  "0": {
    "id": "4829764",
    "label": "Alabama",
    "value": "4829764",
    "lat": 32.75041,
    "lon": -86.75026,
    "poi_name": "Alabama",
    "parent_id": "6252001",
    "long": -86.75026
  },
  "1": {
    "id": "5879092",
    "label": "Alaska",
    "value": "5879092",
    "lat": 64.00028,
    "lon": -150.00028,
    "poi_name": "Alaska",
    "parent_id": "6252001",
    "long": -150.00028
  },
  "2": {
    "id": "5551752",
    "label": "Arizona",
    "value": "5551752",
    "lat": 34.5003,
    "lon": -111.50098,
    "poi_name": "Arizona",
    "parent_id": "6252001",
    "long": -111.50098
  },
  "3": {
    "id": "4099753",
    "label": "Arkansas",
    "value": "4099753",
    "lat": 34.75037,
    "lon": -92.50044,
    "poi_name": "Arkansas",
    "parent_id": "6252001",
    "long": -92.50044
  }
  "4": {
    "id": "5332921",
    "label": "California",
    "value": "5332921",
    "lat": 37.25022,
    "lon": -119.75126,
    "poi_name": "California",
    "parent_id": "6252001",
    "long": -119.75126
  },
}

【问题讨论】：

我们需要更多代码。尤其是你分配和使用这个对象的部分，
当您定义变量时，定义如下：“cities:any={}”。所以一开始不要报错

标签： json angular typescript ngfor

【解决方案1】：

正如错误消息所示，cities 对象未定义。只有在您获取数据后它才会获得一个值。要解决此问题，您可以为城市对象设置一个初始值。

class Component{
    public cities = {}; //empty cities object by default. 

    this.cityService.getCityByCountryId(this.defaultUserNationality, 1)
        .subscribe(data => { 
            this.cities = data;
        });
}

如果你想重复来自 Angular 的城市列表。您首先必须将其转换为数组。使用Object.keys 可以解决这个问题。

【讨论】：

【解决方案2】：

你的错误是

<div class="alert alert-warning">{{cities['0'] | json}}</div>

在 [] 中给出引号，您可以通过使用城市 [0] 来获取值

检查此图片后，您可以通过做城市[$index] 来重复您可以实现的项目。

【讨论】：