es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cuáles son mejores formas de evitar el uso de llamadas a métodos dentro de las plantillas de Angular?

¿Cuáles son mejores formas de evitar el uso de llamadas a métodos dentro de las plantillas de Angular?

16 Jul, 2023 Programación

Estoy tratando de evitar el uso de llamadas de método dentro de los Templates de Angular ya que no son eficientes. Digamos que tengo una lista de nombres:

const nombres: string[] = ['Billy', 'Mandy', 'Carl', 'Sheryl']

y en mi template estoy usando un ngFor para iterar la lista e imprimir los nombres:

<ng-container *ngfor="let nombre of nombres">
  <p>{{ nombre }}</p>
</ng-container>

Pero ahora necesito mostrar solo el nombre si comienza con ‘S’, así que cambio a:

<ng-container *ngfor="let nombre of nombres">
  <p *ngif="nombre.startsWith('S')">{{ nombre }}</p>
</ng-container>

Ahora tengo un método en mi template que sé que se ejecutará más veces de las necesarias. Para evitar esto, podría hacer algo como esto:

// esto se ejecuta cada vez que cambia la lista de nombres
const listaNombresEmpiezanConS: boolean[] = this.nombres.map((nombre: string): boolean => nombre.startsWith('S'));

y luego cambiar mi template a:

<ng-container *ngfor="let nombre of nombres; let i = index;">
  <p *ngif="listaNombresEmpiezanConS[i]">{{ nombre }}</p>
</ng-container>

pero esto ha introducido una nueva lista completamente para evitar la llamada de método en el template. ¿Hay una mejor manera de hacer esto?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, un enfoque alternativo podría ser usar un pipe personalizado para filtrar los nombres que comienzan con ‘S’. De esta manera, la lógica de filtrado se maneja fuera de la plantilla y el método solo se llamará una vez durante la detección de cambios.

    Primero, crea un nuevo pipe (startsWithSPipe) que filtre el arreglo de entrada y devuelva solo los nombres que comienzan con ‘S’:

    import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'startsWithS' })
export class StartsWithSPipe implements PipeTransform {
  transform(names: string[]): string[] {
    return names.filter(name => name.startsWith('S'));
  }
}

    Luego, en la plantilla del componente, utiliza el nuevo pipe para filtrar el arreglo de nombres antes de iterar sobre él:

    <ng-container *ngfor="let name of names | startsWithS">
  {{ name }}
</ng-container>

    De esta manera, el método doesNameStartWithS solo se llamará una vez durante la detección de cambios y la plantilla solo renderizará los nombres que comienzan con ‘S’.

Comments are closed.