2017-01-17 20 views
1

オブザーバブルのtodos bundのリストを持っていて、todosのいずれかを変更すると、すべてのアイテムが再レンダリングされますか?ngrx/storeのアイテムを変更してアイテムをレンダリングすると再レンダリングされる

+0

が、あなたがデモでPlunkrを投稿することができた場合、 – Maxime

+0

さらに良い...あなたを助けることは困難になるだろうと私は間違いなくあなたを伝えること:) – Maxime

+0

をした場合ことができますホープ私はコードを持っていましたが、私は自分のために見ることができました( - :私は新しい/変更されたアイテムを描くだけで反応しますが、Angularは同じことをすることができます) –

答えて

0

角度2とngrx/storeで作成されたtodoプランナーが見つかりました。 変更されたアイテムだけがレンダリングされるのは、Webブラウザのdevtoolsで簡単に確認できます。その点で角度と反応は同じです。角度V2で

"plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS?p=preview"

1

は、我々はコンポーネントステートフル(スマート)とStatlessの2種類があります。手段(ダム)

ステートフル:物事の仕組みに関係します。

統計情報:どのように見えるかに関係しています。

ChangeDetectionStrategy:

あなたがコンポーネントにどんな戦略を定義していない場合は、ChangeDetectionは常に「再放送」このコンポーネントになります。 戦略OnPushの場合、入力の変更があった場合のみ更新されますが、その場合はString、Number for Objects、ArraysのようなImmutablesに対してのみ機能します。

のでngrx /ストアとES6であなたは不変配列(ない唯一の方法)を作成することができ

よう
case ADD_TODO: 
return [...state, action.payload]; 
case UPDATE_TODO: 
return state.map(todo => todo.id === action.payload.id ? action.payload : todo); 

その後、コンポーネントのドスとTODO

<todos [todos]="todosNgRx$ | async"></todos> 

にこのコンポーネントが作成されますされますtodosのリストを取得し、2番目のコンポーネントをTodoに再描画します。

<todo *ngFor="let todo of todos" [todo] = "todo"></todo> 

このコンポーネントはダムで、データのみを表示します。
ToDoの場合の更新のみが更新されるように、ChangeDetectionStrategy.OnPushを与える必要があります。また、新しいToDoを追加すると、ngForは新しいコンポーネントTodoになり、残りのリストは更新されません。

は、それがコードなし

関連する問題