在角插补中使用Array.map

Question

使用Angular 2+，如何在HTML中做类似波纹管的事情？

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

此代码使角度应用程序崩溃。 我必须使用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() 。

管道具有纯度 ，这意味着仅当入站数据发生突变时才执行管道。 当您调用类似{{doWork(object.array)}}的函数时，Angular不知道函数doWork()是否为纯函数。 因此，它假定它不是纯净的，并在每次更改检测时都调用它。

更新：

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

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

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

Answer 2

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

考虑改为：

mappedArray = [];

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

{{ mappedArray }}

干净，可靠，易于阅读/修改且易于理解。 还可以更好地控制函数的评估时间。

Answer 3

在您的组件中 ，您可以具有以下功能：

someFunction(arr: any[]){
    return arr.map(o => o.property);
}

并且在html 模板中 ，假设arr已经是一些定义的数组，则只需在要使用该数组的地方调用该函数即可。 例：

<div *ngFor="let object of someFunction(arr)>
    {{object.property}}
</div>

不幸的是，如果不使用某些函数，就无法直接在html模板中直接调用类似的代码。

*还值得注意的是，此代码不是非常优化，因为someFunction()将由于其在模板中的位置而反复被反复调用。

Answer 4

您可以创建一个get属性并像这样使用它

零件

   data = [
     {property : 'a'},
     {property : 'b'},
     {property : 'c'},
     ]

  get properties () {
    return this.data.map( (o)=> o.property )
  }

模板

{{properties | json}} 

demo🔥🔥