現(xiàn)有以下代碼：

Component

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'app';

    i = 0;

    data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    itemChecked(item) {
        this.i++;
        console.log(item, this.i);
    }

}

Template

<ul>
  <li *ngFor="let item of data">
    {{itemChecked(item)}} {{item}}
  </li>
</ul>

頁面顯示的結(jié)果：

Console輸出的結(jié)果：

頁面是按照預(yù)期的情況顯示的，但是控制臺中并不是，也就是說，模板中的ngFor被調(diào)用了4次！

這個是什么原因呢？ 或者能否避免這種情況呢？