javascript - 在 Angular 插值中使用 Array.map

Question

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

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

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

Answer 1

你不能在 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() 代替。

管 Prop 有纯度，这意味着它们仅在入站数据发生突变 时才执行。当你调用像 {{doWork(object.array)}} 这样的函数时，Angular 不知道函数 doWork() 是否是纯或不。因此它假设它不是纯的，并为每次变化检测调用它。

更新:

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

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

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