Angular: Change detection not triggered の原因と解決策

概要

Angularの変更検知が実行されず、UIが更新されない問題です。

症状

データを更新してもビューが更新されない

原因

OnPush戦略: 参照が変わらないオブジェクト変更
Zone外の非同期処理: setTimeoutやイベント
外部ライブラリ: Zone.jsに認識されない処理
ミューテーション: 配列やオブジェクトの直接変更

解決策

1. 新しい参照を作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  items: Item[] = [];

  updateItem(index: number, newValue: Item) {
    // 悪い例
    this.items[index] = newValue;

    // 良い例
    this.items = [
      ...this.items.slice(0, index),
      newValue,
      ...this.items.slice(index + 1)
    ];
  }
}

2. ChangeDetectorRefを使用

1
2
3
4
5
6
7
8
import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

updateData() {
  this.data = newData;
  this.cdr.detectChanges();  // 明示的に検知
}

3. NgZone.run()を使用

1
2
3
4
5
6
7
8
9
import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

externalCallback(data: any) {
  this.zone.run(() => {
    this.data = data;
  });
}

4. async pipeを使用

1
2
3
4
5
6
@Component({
  template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
  data$ = this.dataService.getData();
}

よくある間違い

OnPushでオブジェクトをミューテート
runOutsideAngularで非同期処理後に戻らない

概要

症状

原因

解決策

1. 新しい参照を作成

2. ChangeDetectorRefを使用

3. NgZone.run()を使用

4. async pipeを使用

よくある間違い

Angular の他のエラー