html - O .includes() é executado durante um loop de detecção de mudanças se a variável associada a ele não mudar?/Alternativa ao .includes()

Eu tenho uma variável user_roles no meu arquivo de componente que é inicializada por uma API no ngInit() e não muda depois disso.

this.service.getUserRoles().subscribe(
      data => {
        this.user_roles = data;
      }
    )

user_roles é um array que contém as permissões para esse usuário: user_roles=['admin', 'mediator', ...]

No meu template eu tenho código que exibe componentes com base no user_role:

<div *ngIf="user_roles.includes('admins') || user_roles.includes('mediator')">

    <div ....
    .
    . 
    .

O .includes() é executado toda vez que alguma outra variável muda e o loop de detecção de alterações é executado? Se for, então qual alternativa posso usar para melhorar o desempenho?

Resposta #1

Sim, vai.

A detecção de mudanças do angular não significa que, se uma propriedade mudar, suas dependências serão atualizadas. Isso é, na verdade, o jeito do vue. Na realidade, a detecção de mudanças do angular significa que toda vez que uma ação assíncrona (Promise, event, setTimeout) acontece, todas as vinculações de template são reavaliadas. Então sim, includes será chamado novamente.

A maneira mais simples de verificar é a seguinte

const orig = Array.prototype.includes
Array.prototype.includes = function<T> (arg: T) {
    console.log(this, arg)
    orig.call(this, arg)
}