Проблема в Angular 8 итерации непустого массива

Question

У меня довольно странная проблема при получении массива с использованием http-запросов в Angular 8. Запрос выглядит так:

getPort(): any {    
return this.http.get(this.portsApiUrl).toPromise().then(data => {
    let masterSchedule = data["masterSchedule"];         
          for (const d of masterSchedule as any) {        
            this.portList.push(d);        
          } 
});

Этот код работает нормально, и он получает список портов своевременно; Затем я передаю его другому компоненту, используя @Input. Список попадает в компонент нормально; если я регистрирую его через консоль в методе OnInit указанного компонента, список отображается правильно.

Проблема возникает, когда я пытаюсь перебрать список с помощью ngFor. Попытка передать html {{item.departurePort}} (это правильное имя переменной, так как я могу видеть объекты в массиве и имена их соответствующих переменных) в конечном итоге выдает undefined ошибка. Однако, вызов portList.length внутри компонента в любое время покажет правильное количество элементов в массиве. Это очень странно, если честно. Вот консольный журнал списка, который печатается в методе onInit:

И вот ошибка:

На всякий случай вот код html, который перебирает массив:

<div class="col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center">
<ul class="flags">
  <li ngFor="let item of portList">          
    <p><a style="color: #656D78;">{{item.departurePort}}</a>
        </p>            
  </li>
</ul>

Есть идеи?

Answer 1

В вашем шаблоне вы должны использовать "?" :

<li *ngFor="let item of portList">          
    <p><a style="color: #656D78;">{{item?.departurePort}}</a>
        </p>            
 </li>

Также вы можете использовать Observables вместо обещаний, это намного мощнее.

Answer 2

Можно увидеть, что item имеет свойства, используя json pipe:

<li *ngFor="let item of portList">          
    <p>
        <a style="color: #656D78;">{{item | json}}</a>
    </p>            
</li>

На основании этого вы можете написать желаемое свойство. Кроме того, вы можете использовать оператор ?. для предотвращения ошибок:

<li *ngFor="let item of portList">          
    <p>
        <a style="color: #656D78;">{{item?.yourPropertyName }}</a>
    </p>