Angular: [disabled] = "isDisabled ()" является правильным способом?

Question

Мне интересно, подходит ли приведенный ниже код с точки зрения производительности.

в html

<button [disabled]="isDisabled()">btn</button>

в тс (компонент)

isDisabled(): boolean {
  //...some loop calculation
  console.log('run isDisabled');
  return result;
}

The *Метод 1009 * выполняется все время, даже если вы просто прокрутите веб-браузер.

В официальном Angular

Имя свойства или методвызов должен быть нормой.

Я вижу, что вызов метода разрешен, но я чувствую, что это своего рода потеря, особенно логика цикла.

Можно ли продолжать использоватьвызов метода в атрибуте [disabled] в html или есть лучший способ?

Спасибо.

Answer 1

Я не рекомендую использовать вызовы функций внутри html, потому что функция вызывается очень часто, как вы сказали.В вашем случае вы можете просто использовать канал или логический флаг, который вы устанавливаете внутри компонента / службы.

Решение для канала может выглядеть следующим образом:

disabled.pipe.тс

@Pipe({name: 'disabled'})
export class DisablePipe implements PipeTransform {
    // Maybe you need additional params
    transform(arr: any[]) {
        // Do you loop over the array
        return result;
    }   

}

а в тебе html:

<button [disabled]="yourArray | disabled">btn</button>

Answer 2

Это нормально, но не хорошо.

Предположим, у вас есть 500 итераций в цикле for, при любом обнаружении изменений это может выполняться.Обычно лучшим способом является использование Observable API, объявляющего зависимые значения, поскольку вы можете использовать асинхронный канал.