Блог

Главная - Вопросы по программированию - Почему прослушиватель событий вызывает метод * ngIf дочернего компонента?

Почему прослушиватель событий вызывает метод * ngIf дочернего компонента?

#angular #angular-template

#angular #angular-template

Вопрос:

Пожалуйста, взгляните на следующий код 

 <div id="safetyDiv" (scroll)="onScrollSafety()">
  <ul>
    <li *ngFor="let message of messages; let i = index;">
      <div *ngIf="foo()">{{message}}</div>
    </li>
  </ul>
</div>

Почему выполняется прокрутка safetyDiv вызова foo() ? Я предполагаю, что это как-то связано с обнаружением изменений. В целях тестирования я удалил прослушиватель событий прокрутки, а затем foo() не вызывается при прокрутке. Однако в моем случае мне нужно быть проинформированным о событии прокрутки.
Итак, есть ли способ, с помощью которого я могу прослушать событие прокрутки без его постоянного вызова foo() ?

Также вы можете взглянуть на созданный мной stackblitz, показывающий описанное поведение:https://stackblitz.com/edit/angular-rotj54

Комментарии:

1. вызовы функций в шаблонах — плохая практика, и по этой причине их следует избегать. foo зависит от чего-то, поэтому вместо вызова функции просто установите свойство с именем foo при изменении этой зависимости.

2. Знаете ли вы, что этим вы приводите к огромной утечке памяти? Пожалуйста, упростите и максимально быстро очистите код, чтобы не воспроизводить утечку памяти.

3. Опубликованный пример очень упрощен, чтобы четко проиллюстрировать мой вопрос. Теперь на самом деле я использую *ngIf для различения разных типов. Поскольку массив сообщений использует тип объединения и в зависимости от типа message я затем вставляю другой компонент.

4. Я обновил hello.component.ts в моем stackblitz псевдокодом, чтобы проиллюстрировать, что я теперь буду делать. Это лучшее решение?

Ответ №1:

обычно, если вы выполняете итерацию по массиву объектов

 messages.forEach(x=>x.foo=this.foo(x))
//and use <div *ngIf="message.foo">

Если это массив строк или чисел, используйте вспомогательную переменную

 foos=messages.map(x=>this.foo(x))
//and use <div *ngIf="foos[i]>