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

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template:`
      <div *ngFor="let v of getArray();">
        {{v}}
      </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  getArray(){
    console.log("getArray");
    return [1,2,3,5,6];
  }
}

上記を実行するとlogに
11:17:30.567 app.component.ts:15 getArray
11:17:30.578 app.component.ts:15 getArray
11:17:30.579 lang.js:130 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
11:17:30.581 app.component.ts:15 getArray
11:17:30.582 app.component.ts:15 getArray

と表示されます。なぜ4回も実行されるのでしょうか?

1 件の回答 1

2

Angular、またはAngularJSは変更検知の仕組みによりデータバインディングを実現しています。
コンポーネントに関数を渡すと変更検知のために呼び出されます。
(関数を評価しないと変更があるかどうかをAngularが判断できない)

変更検知は様々なタイミングで行われるため、複数回呼び出されています。
変更検知について詳しく知りたければ、Angularjsであれば$digestイベントループを、AngularであればZoneJSによる変更検知の仕組みなどについて調べると良いかと思います。

変更検知の仕組みがあるのでngFor(コンポーネント)に関数を渡す実装はパフォーマンスの面であまり良くはありません。
コンポーネントのオブジェクトとしてデータバインディング用の変数を定義し、それをngForに渡すようにしてください。

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

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template:`
      <div *ngFor="let v of arrays">
        {{v}}
      </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numArray: Array<Number>;

  ngOnInit() {
    this.numArray = this.getArray();
  }

  getArray(){
    console.log("getArray");
    return [1,2,3,5,6];
  }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。