▷Uso de Array.map en interpolación angular ✔️ Foro Ayuda 【 2024 】

Por fin luego de tanto luchar pudimos hallar la solución de este enigma que ciertos los usuarios de nuestro espacio han tenido. Si tienes algún dato que compartir no dudes en dejar tu información.

Solución:

No puede definir funciones en expresiones angulares. Así que tienes que usar tubería en cambio, que están optimizados para las plantillas. Son reutilizables en otros componentes.

pluck:"property"

Con un tubo de arranque:

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

No se recomienda llamar a funciones en el componente para calcular valores para la plantilla. Esta se mueve trabajar desde el componente a la plantilla, y si necesita datos para ser mutado entonces haz ese trabajo en ngOnInit() o en ngOnChanges() en lugar de.

Las tuberías tienen pureza lo que significa que se ejecutan solo cuando los datos entrantes son mutado. Cuando llamas a una función como doWork(object.array) entonces Angular no sabe si la función doWork() es puro O no. Entonces asume que no es puro y lo llama para cada detección de cambio.

Actualizado:

Cada vez que trabaje con matrices en Angular, debe tratarlas como inmutables. Donde crea una nueva instancia de ese Array cuando necesita modificarlo. Por ejemplo; items = [...items, newItem]; en lugar de items.push(newItems).

Esto resuelve problemas de detección de cambios relacionados con tuberías, ngFor, detección de cambios OnPush y tiendas de estado.

https://medium.com/dailyjs/el-estado-de-inmutabilidad-169d2cd11310

podría encontrar algunas soluciones para que esto funcione, pero mi respuesta es que no debe hacer esto, ya que las llamadas a funciones en la plantilla afectan negativamente el rendimiento, al igual que las tuberías impuras que esto requeriría para ser confiables.

Considere en su lugar:

mappedArray = [];

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


 mappedArray

limpio, confiable, fácil de leer/modificar y fácil de entender. También brinda un control más preciso sobre cuándo se evalúan sus funciones.

Recuerda algo, que tienes autorización de añadir una estimación acertada si te fue útil.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Uso de Array.map en interpolación angular

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: