web-dev-qa-db-ja.com

データ変更を登録しない変更検出

コンポーネント内にコンポーネントを持つhtml構造があります（適切なWordを忘れていました）。

基本的にこのように動作します（大幅に簡略化されます）：

メインHTML：

_<div *ngFor="let item of data">
  <app-item [item]="item"></app-item>
</div>

<button (click)="addItem()">Add</button>
_

アイテムhtml：

_<div>{{item.name}}</div>

<button (click)="deleteItem()">Delete</button>
_

app-item内に、リストからいくつかの項目を表示します。リストは、http.getリクエストを介してデータベースから直接データを取得します。

今、私は両方が機能するアイテムを追加または削除する機能も持っています（アイテムはデータベースに、またはデータベースからそれぞれ追加または削除されます）。ただし、変更の検出では変更が検出されないため、変更を表示するには（F5などを使用して）サイトを更新する必要があります。

私はコードをチェックしました（すべてが私からのものではありません）、指定された変更検出戦略を見つけることができませんでした。

また、ChangeDetectorRef（this.ref.detectChanges();）を使用して、追加機能と削除機能から手動で変更検出をトリガーしようとしました。ただし、変更を確認するために手動でページを更新する必要はありませんでした。

これを取得するための変更検出には何が欠けていますか？または、追加/削除メソッド内で手動でトリガーするにはどうすればよいですか？

angularangular-http
9
m41n

既存の配列の要素を追加または削除しているので、angularは変更を選択できません。

これが機能するには、次のようにすることができます

  • items= items.slice();と同じ配列の要素の新しいオブジェクトで配列参照を割り当てます
  • または、_Object.assign_メソッドをitems= Object.assign([],items);として使用できます。
  • 配列に変更を加えた後、両方のことを行う必要があります。

手動で変更検出を起動するには、回答を追跡できます このリンク上

コンポーネントにChangeDetectorRefを挿入してから、そのオブジェクトのdetectChanges()メソッドを使用して、変更検出を手動で起動します。

_constructure(private cd: ChangeDetectorRef){}

someMethod(){
    cd.detectChanges();
}
_
9
Prathmesh Dali

プッシュの代わりにスプレッド演算子を使用する場合、それは機能するはずです。

this.data = [...this.data, newItem];

この理由は、angularは、オブジェクト全体が変更されたとき、または参照が変更されたときに変更を検出するため、ミューテーションによってトリガーされないためです。したがって、配列をミューテーションする代わりに、新しい配列にするため。

3
cpi

ChangeDetectionStrategyを追加すると、問題が解決する場合がありますが、一般的には、それを選択する必要がありますAngularは、コードにバグがある可能性があります

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MovieComponent {
  // ...
}
0
Rahul Singh