Angular, перепутать с консольным результатом

Question

Я новичок в angular. Меня смущает вывод на консоль приложения angular. Сначала посмотрите, что я сделал до сих пор!

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
                {{getCourse()}}
            `,
   styleUrls: ['./app.component.css']
})
export class AppComponent {
    code = ['C++', "Python", "JAVA", 'ReactJS', "Angular"];
    getCourse()
    {
        for(let i = 0 ; i < (this.code).length ; i++)
        {
            console.log(this.code[i]);
        }
    }
}

Здесь AppComponent имеет один массив код и один метод getCourse () . Я использовал встроенный шаблон и привязку данных с помощью getCourse () , и этот метод перебирает массив и печатает на консоли. Вот мой вывод на консоль. Видите, здесь один и тот же вывод повторяется 4 раза, а не 1 раз. Зачем? Я написал logi c, чтобы повторить l oop один раз.

Answer 1

Короткий ответ - из-за обнаружения изменений. Ваш шаблон выполняет повторную визуализацию (и выполняет свой метод getCourse()) после любого события в компоненте или его потомках.

Если вы хотите контролировать обнаружение изменений, вы должны установить

@Component({
    ....
    changeDetection: ChangeDetectionStrategy.OnPush,
    ...
})

Добавить ChangeDetectorRef в вашем конструкторе и запускайте this._changeDetectorRef.markForCheck();, когда вам нужно перерисовать.

Также есть некоторые правила, когда обнаружение изменений запускается само по себе в случае стратегии OnPu sh, например, при изменении входного значения.

подробнее об обнаружении изменений см.

https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

https://indepth.dev/everything-you-need-to-know-about-change-detection-in-angular/