typescript - Angular 2 Actualizar valores dentro de un ngFor con una promesa no muestra los valores correctos

Obtengo una primera lista de elementos que muestro en la vista desde un servicio. Pero después de obtener el arreglo necesito actualizar los elementos internos con los resultados de nuevas promesas, pero esto no está funcionando. Por favor, vea el plnkr adjunto para ver el problema. Este es el acceso al servicio:

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

Esta es la vista:

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

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

Respuesta #1

El problema es que estás tratando de vincular promesas directamente a la vista, y no funciona así porque "algo" necesita resolver estas promesas para obtener los resultados. Angular tiene un pipe llamado "async" para resolver observables y promesas, así que edité tu plunkr aquí usando el pipe async, lo cual resolverá los nombres. Además, ese index debería empezar desde 1 en lugar de 0, supongo, porque tu arreglo de nombres no tiene ningún equipo con id == 0. Tu principal problema era esta parte

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

Aquí está https://plnkr.co/edit/BdzvLBYNjD3LB2GjrAKe?p=preview