时间戳

首页 > 解决方案 > 在角度插值中使用 Array.map

javascript - 在角度插值中使用 Array.map

问题描述

使用 Angular 2+，我怎样才能在 HTML 中做类似下面的事情？

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

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

标签： javascriptangulartypescript

解决方案

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

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

使用采摘管：

@Pipe({name: 'pluck'})
export class PluckPipe implements PipeTransform {
  transform (input: any[], key: string): any {
      return input.map(value => value[key]);
  }
}

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

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

更新：

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

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

https://medium.com/dailyjs/the-state-of-immutability-169d2cd11310

推荐阅读