Angular 2 使用 promise 更新 ngFor 中的值未显示正确的值

Question

我从服务获得了在视图中显示的第一个元素列表。但是在我得到数组后，我需要用新承诺的结果更新内部元素，但这不起作用。请参阅随附的 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

Answer 1

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

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

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

Angular 2 使用 promise 更新 ngFor 中的值未显示正确的值

Angular 2 Updating values inside an ngFor with a promise is not showing the proper values

promise

typescript

ngfor

angular