Angular 8迭代非空数组中的问题答案

【问题标题】：Problem in Angular 8 iterating non-empty arrayAngular 8迭代非空数组中的问题
【发布时间】：2020-06-03 17:42:54
【问题描述】：

我在 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 迭代列表时会出现问题。尝试将 {{item.departurePort}} 传递给 html （这是正确的变量名称，因为我可以看到数组中的对象及其各自变量的名称）最终会抛出一个 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>

有什么想法吗？

【问题讨论】：

我注意到的第一件事是您在 ngFor 之前没有星号。但是，如果这是一个错字，您可以从项目迭代器中访问任何其他属性吗？
一个快速的解决方法是使用?.（可选的链接运算符）：{{item?.departurePort}}`。尽管您将空值推送到数组中，但此时您应该解决问题。

标签： javascript asp.net angular frontend angular8

【解决方案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>

【讨论】：

【解决方案2】：

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

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

你也可以使用 Observables 代替 Promise，它的功能更强大。

【讨论】：