角8迭代非空数组的问题
角8迭代非空数组的问题
提问于 2020-02-19 14:13:12
我遇到了一个非常奇怪的问题，使用角度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>
有什么想法吗？
回答 2
Stack Overflow用户
发布于 2020-02-19 14:54:28
通过使用item管道，可以看到什么是json的属性：
<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>
Stack Overflow用户
发布于 2020-02-19 14:54:58
在模板中应该使用"?“：
<li *ngFor="let item of portList">
<p><a style="color: #656D78;">{{item?.departurePort}}</a>
</p>
</li>此外，你可能希望使用可观察的，而不是承诺，它是更强大的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60302307
复制相关文章
相似问题
腾讯云开发者
