Angular 8 迭代非空数组的问题

Question

我在 Angular 8 中使用 http 请求获取数组时遇到了一个相当奇怪的问题。请求如下所示：

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}} （这是正确的变量名称，因为我可以看到数组中的对象及其各自的变量名称）最终会抛出未定义的错误。 但是，随时在组件内调用 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

可以使用json管道查看哪些item具有属性：

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

Answer 2

在您的模板中，您应该使用“？” ：

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

你也可能想使用 Observables 而不是 promise，它的功能更强大。