Angular - Почему моя простая функция вызывается много раз?

Question

У меня есть простая таблица, в которой я использую ngFor для отображения строк.

app.component.html

<table>
    <thead>
        <tr>
            <th>Header 1</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of items">
            <td>
                <a>{{myFunc(item?.id) ? "1" : "2"}}</a>
            </td>
        </tr>
    </tbody>
</table>

items - это список, в котором есть один объект. Я ожидаю, что myFunc() будет оцениваться только один раз для одного объекта в списке items. Однако, похоже, что myFunc() вызывается 4 раза , и я понятия не имею, почему.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = [{"id": 1}];

  myFunc(itemId) {
    console.log("i was called");
    return true;
  }
}

Демонстрация, показывающая эту ошибку: https://stackblitz.com/edit/angular-j7jgfl. «Я был вызван» выводится на консоль 4 раза. Может кто-нибудь сказать мне, почему и как правильно вызвать функцию один раз?

Answer 1

вот ваш улучшенный код, я не знаю, правильно я сделал или нет

 <tr *ngFor="let item of items">
            <td>
                <a>{{myFunc(item) ? "1" : "2"}}</a>
            </td>
        </tr>




myFunc(itemId) {
if(itemId){
console.log("i was called");
    return true;
}else{
return false;
}

  }

может быть, это поможет вам

Answer 2

В консоли вы можете увидеть следующее сообщение:

Angular работает в режиме разработки.Вызовите enableProdMode (), чтобы включить производственный режим.

Это означает, что Angular повторно запускает обнаружение изменений в режиме разработки после каждого цикла и проверяет, что ничего не изменилось после второго раза.Если это произойдет, будет показано предупреждение, потому что эти изменения могут не быть обнаружены в производственном процессе без повторного запуска.

Если вы запустите enableProdMode(); в файле main.ts перед загрузкой (вы должны обновить один раз в Stackblitz), вы увидите, что функция будет вызываться только вдвое реже, два раза остаются.

Обнаружение изменений будет выполняться по многим различным причинам при использовании значения по умолчанию ChangeDetectionStrategy.Каждый раз, когда ваша функция будет оценена.Если вы хотите, чтобы обнаружение изменений запускалось только один раз, измените ChangeDetectionStrategy на OnPush следующим образом:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})

Обнаружение изменений теперь запускается только при изменении значения @Input (ссылка на объект) или событие было запущено.