Question

插值后

{{ (__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);），但我希望有一个优雅的解决方案，..

Answer 1

这是Alexander（Angular2-Github-Platform）

的答案

你可以使用* ngFor =“让我们计算计算| async”

@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

Answer 2

这不是一个错误。这是因为您正在?.上执行elvis运算符（calculation）。如果服务尚未完成，您将从第一部分null中获取(__responseData | async)?.calculation，然后您立即从空值中获取第一个元素，并且当错误发生时。

为了避免在这种情况下出现异常，您必须确保(__responseData | async)?.calculation在尝试进一步向下之前不为空。据我所知，我们没有?[i]运算符用于数组，所以我建议你使用辅助方法。

我已经在这个plunker中做了这个，供你参考：http://plnkr.co/edit/pkZW9lQfk1f5hKczKtim?p=preview

或者：http://plnkr.co/edit/ybvEvAr4t7dUvmAfFf3q?p=preview

Angular2：从Observables渲染数据

2 个答案: