Функции шаблона Angular вызываются при обновлении интерфейса?

Question

Я написал это демо , и я хочу убедиться, что я правильно понимаю динамику.

В нем всякий раз, когда один из флажков выбран, он вызывает соответствующий merge наблюдаемые события флажков для запуска.

Триггер вызывает переопределение массива экземпляров, которые говорят, должны ли столбцы таблицы материалов быть скрытыми или нет.

Компонент также имеет этот метод, который определяет столбцы таблицы материалов:

  getDisplayedColumns():string[] {
    return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);
  }

IIU C причина, по которой метод вызывается, заключается в том, что он вызывается при каждом обновлении пользовательского интерфейса. Другими словами Angular Обнаружение изменений вызывает это?

Answer 1

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

Но вы можете управлять тем, как механизм обнаружения изменений работает с вашим компонентом, установив стратегию обнаружения изменений.

Стратегии обнаружения изменений

По умолчанию обнаружение изменений запускается по многим причинам - щелчки, прокрутка, или другие асин c события. Следовательно, метод может вызываться сотни / тысячи раз.

Но вы можете использовать changeDetection: ChangeDetectionStrategy.OnPush в своем компоненте. Механизм обнаружения изменений проверяет изменения, только если @Input() свойства были изменены.

Но это только половина решения ...

Избегайте использования методов в шаблоне

Другая половина - вообще не использовать метод в шаблоне и использовать там свойство класса. Кстати, следуйте тому же правилу для получателей , а также

<mat-row *matRowDef="let row; columns: columns"></mat-row>

Все, что вам нужно, это установить this.columns в вашем классе, когда оно должно быть действительно изменено.

I надеюсь, это поможет.

Answer 2

Да. Каждый щелчок или другое событие в пользовательском интерфейсе пытается вызвать getDisplayedColumns раз и снова, потому что это метод в html. Вы должны избегать этого, устанавливая свойство класса с этими столбцами, когда оно загружено.

Посмотрите мои исправления: https://stackblitz.com/edit/angular-material-table-hide-columns-owzmtl?file=src / app / app.component.ts