跟随插值

{{ (__responseData | async)?.calculation | json }}

输出遵循结构
[
    {
        "gross": 26.625834,
        "net": 20.425833,
        "tax": 6.2000003
    }
]

我怎么能变得恶心?
{{ (__responseData | async)?.calculation[0].gross }}

不起作用,以下所有尝试也不起作用:
{{ (__responseData.calculation[0] | async)?.gross }}
{{ (__responseData.calculation.[0].gross  | async) }}

怎么了?
编辑:作为解决方法,我使用flatmap(this.__responseData.flatMap((data: any) => data.calculation);),但我想有一个优雅的解决方案,…

最佳答案

这是Alexander的答案(angular2 github平台)
您可以使用*ngfor=“让计算异步”

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `
    <div *ngFor="let calculation of calculations | async">
      Gross: {{ calculation.gross }}<br>
      Net: {{ calculation.net }}
    </div>
  `,
  directives: [NgFor]
})
export class App {
  calculations: Observable<{gross:number; net:number}[]>;

  constructor(private _http: Http) {
    this.calculations = this._http.get("./data.json")
                            .map(res => res.json().calculation)
  }
}

http://plnkr.co/edit/3ze70dYycQxNyXA286mX?p=preview

09-30 14:52