Как зациклить массив, поступающий от асинхронного вызова удаленного файла JSON?

Question

Я пытаюсь получить данные из файла JSON для создания формы.

Вот часть моего шаблона:

  <div class="form-group">
    <label for="power">Power</label>
    <select class="form-control" id="power" required>
      <option *ngFor="let p of heroes" [value]="p.level">{{p.level}}</option>
    </select>
  </div>

Вот часть удаленного файла JSON:

{
    "data": [
        {
            "level": "newbie",
            "places": [
                {
                    "place": "earth",
                    "categories": [
                        {
                            "category": "human",
                            "values": [
                                ...

Это работает без проблем, и я получаю newbie и другие варианты в select меню.

Теперь я хочу включить placesпоэтому я редактирую HTML-шаблон следующим образом:

  <div class="form-group">
    <label for="power">Power</label>
    <select class="form-control" id="power" required>
      <option *ngFor="let p of heroes[0].places" [value]="p.place">{{p.place}}</option>
    </select>
  </div>

Как вы можете видеть, я использовал heroes[0].places вместо heroes войти в places массив, который является свойством первого элемента в heroes массив.

Вот сервис, который я использую, чтобы получить данные из файла JSON:

@Injectable()
export class HeroService {
    private url = 'app/mockups/heroes.json';

    constructor(private http: Http) { }

    getHeroes(): Promise<Array<Object>> {
        return this.http.get(this.url)
            .toPromise()
            .then(response => response.json().data as Array<Object>)
            .catch();
    }
}

и вот hero.component:

export class HeroComponent implements OnInit {
    heroes: Array<Object>;

    constructor(private heroService: HeroService) { }

    ngOnInit():void {
        this.getHeroes();
}

    getHeroes(): void {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

Но я получаю ошибку "Не могу прочитать свойство 0 из неопределенного".

Я думаю, это происходит потому, что я получаю данные асинхронным способом, и когда Angular пытается разрешить привязки, данные в первый раз все еще равны нулю, поэтому heroes[0] завершается неудачно. По этой причине я даже попытался добавить Elvis operator в петле (let p of heroes[0]?.places), но я получаю ту же ошибку. Итак, как зациклить массив, содержащий данные, поступающие от асинхронного вызова?

Answer 1

Вы пытались использовать async труба? Если нет, обратитесь к фрагменту кода ниже:

*ngFor="let p of heroes[0].places | async " [value]="p.place"