0

Estou avaliando a melhor abordagem para renderizar algo no meu template a partir de uma condição, de forma que evite renderizações e chamadas de funções desnecessárias pra melhoria do desempenho da aplicação.

Percebi que se eu tenho uma função no meu template para verificar e retornar algo, sempre que há alguma ação na tela, essas funções são chamadas novamente. Exemplo:

<div *ngFor="let usuario of usuarios">
   <h3> {{getUserRole (usuario.id)}} </h3>
</div>

E no meu TS:

getUserRole (id: number) {
   if (id === 0) {
      return 'Professor'
   } else if (id === 1) {
      return 'Estudante'
   }
}

Sempre que eu executar uma ação em minha página, por exemplo, um clique em um botão, essa função será chamada, mesmo que desnecessariamente. Uma alternativa para evitar isso é usar pure pipes.

Estou me perguntando se, quando eu uso a condição ternária no meu template, isso também ocorre, ou seja:

<div *ngFor="let usuario of usuarios">
   <h3> {{usuario.id === 0? 'Professor': 'Estudo'}} </h3>
</div>

Se isso também ocorre, quando eu preciso usar pipes? Em todos os casos que eu preciso renderizar algo sobre um condicional como nos exemplos acima ou apenas se minha condição for muito pesada (uma matriz com muitos objetos e propriedades)?

1 Resposta 1

1

Na real eu usaria o pipes só se eu quiser filtrar a lista de usuárias que vai ser exibida.

Veja, no seu caso independente se o usuário é professor ou aluno, vai ser criado uma linha e será exibido.

Agora se você quisesse fazer esse mesmo *ngFor exibir a partir da lista de usuários apenas linhas de professores você poderia fazer isso com um pipe.

No HTML

 <div *ngFor="let usuario of usuarios | removerAlunosPipe ">
  ...
 </div>

No Ts

@Pipe({name: 'removerAlunosPipe', pure: true})
export class RemoverAlunosPipe implements PipeTransform {
  transform(usuarios: any[]): string[] {
    return usuarios.filter(usuario => usuario.id === 0))
  }
}

Lembre que vc precisa importar o Pipe no app.module Usando um pipe pure true ele vai ser executado apenas quando a variavel usuarios sofrer alteração.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .