静的な配列のオブジェクトで* ngForを反復処理すると、DOMは常に更新されます

Question

私はオブジェクトの静的配列を繰り返し処理し、内容を表示する単純なコンポーネントを持っています。このコンポーネントを大きなアプリケーションに追加すると、コンテンツが正しく表示されますが、クリックイベントを登録できません。 right click -> Inspectを使用してクロムの要素を検査すると、bodyタグで挨拶され、期待どおり個々の要素にドリルダウンしません。

手動でナビゲートすると、要素を調べると、コンポーネントがDOMによって常に更新されていることがわかります（divタグが点滅します）。私の理解では、静的配列なので変更が検出されるべきではありません。

オブジェクト配列を単純な文字列配列に変更すると、['a', 'b', 'c']は正常に動作し、DOMは更新されません。

追加の要素を追加すると、ngFor以外のテンプレートは影響を受けず、常に更新されません。

私はV2.4.1

簡体コンポーネント

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

 
@Component({ 
 
\t selector: 'app-ngfor-test', 
 
\t templateUrl: './ngfor-test.component.html', 
 
\t styleUrls: ['./ngfor-test.component.css'] 
 
}) 
 
export class NgforTestComponent { 
 
\t 
 
\t get items() { 
 
\t \t return [ 
 
\t \t \t { 
 
\t \t \t \t 'label': 'a', 
 
\t \t \t \t 'value': 'first' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t 'label': 'b', 
 
\t \t \t \t 'value': 'second' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t 'label': 'c', 
 
\t \t \t \t 'value': 'third' 
 
\t \t \t } 
 
\t \t ]; 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

テンプレート

<div class="item-container" *ngFor="let item of items"> 
 
\t <label>{{ item.label | uppercase }}</label> 
 
\t <span>{{ item.value }}</span> 
 
</div>

を使用しています

Answer 1

@seidmeが述べたように、変更検出が実行されるたびにgetterが呼び出されるため、頻繁に行うことができます。

get items() { 
    return [ 
     { 
      'label': 'a', 
      'value': 'first' 
     }, 
     { 
      'label': 'b', 
      'value': 'second' 
     }, 
     { 
      'label': 'c', 
      'value': 'third' 
     } 
    ]; 
} 

ngForが再レンダリングリストに原因となる、それが呼び出されるたびに新しいオブジェクトインスタンスを返します。角度は、それが同じオブジェクトのインスタンスを持って、何も変わっていないと何も更新または再レンダリングする必要はありません認識するため

あなたは、

items = [ 
     { 
      'label': 'a', 
      'value': 'first' 
     }, 
     { 
      'label': 'b', 
      'value': 'second' 
     }, 
     { 
      'label': 'c', 
      'value': 'third' 
     } 
    ]; 

get items() { 
    return this.items; 
} 

それが再レンダリングを停止しますし、それを変更した場合。

Answer 2

getterを*ngForに設定しています。 getシンタックスはオブジェクトプロパティを、そのプロパティがルックアップされるときに呼び出される関数にバインドします（Angularが変更検出を実行するたびに）、常に新しい配列オブジェクトを返します（参照の変更）。リスト。