angular - Angular 2用promise更新ngFor内部的值未显示正确的值

我从一个服务中得到了显示在视图中的第一个元素列表。但是在得到数组之后，我需要用新承诺的结果更新内部元素，但是这不起作用。请参阅随附的plnkr以查看问题。
这是服务访问：

this.teamsService.getTeams()
  .then(teams=> {
    teams.forEach(team => team.name =
    this.namesService.getName(idx++));
    this.teams = teams
  });

这是视图：

<div *ngFor="let team of teams">
  <p>Team {{team.name.value}}</p>
</div>

https://plnkr.co/edit/TWyv7DbPyQjehzAs457P?p=info

最佳答案

问题是，你试图将承诺直接绑定到视图上，但它并不是这样工作的，因为“某物”需要解决这些承诺才能得到结果。Angular有一个名为“async”的管道用于解析可观测数据和承诺，所以我在这里编辑了您的plunkr，使用异步管道解析名称。另外，我猜idx应该从1开始，而不是从0开始，因为您的名称数组没有id==0的任何团队。
你的主要问题是这个部分

{{(team.name | async)?.value}}

这里https://plnkr.co/edit/BdzvLBYNjD3LB2GjrAKe?p=preview

关于angular - Angular 2用promise更新ngFor内部的值未显示正确的值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43577464/