在 Angular Interpolation 中使用 Array.map

Question

使用 Angular 2+，我如何在 HTML 中执行类似波纹管的操作？

{{ object.array.map( (o)=> o.property ) }}

此代码会使 Angular 应用程序崩溃。我必须使用管道或类似的东西？

Answer 1

您不能在 Angular 表达式中定义函数。因此，您必须使用针对模板进行了优化的管道。它们可以跨其他组件重用。

<pre>{{ object.array | pluck:"property" | json }}</pre>

使用拔管：

<pre>{{ object.array | pluck:"property" | json }}</pre>

不建议在组件上调用函数来计算模板的值。这会将工作从组件转移到模板，如果您需要对数据进行变异，那么在 inngOnInit()或 in 中执行该工作ngOnChanges()。

管道具有纯度，这意味着它们仅在入站数据发生变化时才执行。当你调用一个像{{doWork(object.array)}}Angular 这样的函数时，它不知道该函数doWork()是否是纯函数。所以它假设它不是纯的，并在每次更改检测时调用它。

更新：

任何时候在 Angular 中使用数组时，都应该将它们视为不可变的。当您需要修改它时，您可以在哪里创建该 Array 的新实例。例如; items = [...items, newItem];而不是items.push(newItems).

这解决了与管道、ngFor、OnPush 更改检测和状态存储相关的更改检测问题。

Answer 2

您可以找到一些解决方法来完成这项工作，但我的答案是您不应该这样做，因为模板中的函数调用会对性能产生负面影响，不纯管道也是如此，这需要可靠。

考虑一下：

mappedArray = [];

ngOnInit() {
  this.mappedArray = object.array.map( (o)=> o.property );
}

{{ mappedArray }}

干净、可靠、易于阅读/修改且易于理解。还可以对函数评估的时间进行更精细的控制。