Как повторить список в Angular? Особенно с рядом имен собственности

Question

Например,

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
  },
}

Answer 1

Ошибка, которую вы делаете, это

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

давая кавычки внутри [], вы можете получить значения, просто используя города [0]

один раз проверьте это изображение, и для вашего повторения предметов вы можете достичь, выполнив города [$ index].

Answer 2

Как следует из сообщения об ошибке, объект cities не определен. Он получает значение только после извлечения данных. Чтобы это исправить, вы можете установить начальное значение для объекта city.

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

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

Если вы хотите повторить список городов от Angular. Сначала вам нужно преобразовать его в массив. Использование Object.keys может работать для этого.