こんにちは、Angular2 でアプリケーションを開発しています。HTMLテーブルに表示する必要がある多次元リストをAPI経由で受け取ります。
これは、API から受け取る json の簡略化されたバージョンです。
{
"events": [
{
"id": 0,
"name": 0,
"sub_events": [
{
"id": 0,
"name": 0,
"actions": [
{
"id": 0,
"name": 0
}
]
}
]
}
]
}
次のように表示するときに、コンポーネントを分離しようとしました。
ListComponent :
<event-view [event]='event' *ngFor="let event of events"></event-view>
EventComponent: (イベント ビュー セレクター)
<div>
<h1>{{event.id}} {{event.name}}</h1>
<table>
<tr subevent-view [subEvent]='subEvent' *ngFor="let subEvent of event.sub_events"></tr>
</table>
</div>
SubEventComponent: (サブイベント ビュー セレクター)
<td>{{subEvent.id}}</td>
<td>{{subEvent.name}}</td>
<td>
<event-action [action]='action' *ngFor="let action of subEvent.actions"></event-action>
</td>
EventActionComponent: (イベント アクション セレクター)
<button (click)='....' >{{action.name}}</button>
私のすべてのコンポーネントはchangeDetectionを使用しています:ChangeDetectionStrategy.OnPush
アクションをクリックすると、Angular 2 はリスト全体ではなく、クリックされたボタンのみを再チェックします。
今のところ、Angular はリストのチェック + すべてのイベントの 1 つのチェック + すべてのサブイベントの 1 つ + すべてのアクションの 1 つを行います ...
ChangeDetectorRef.detach を使用してみましたが、何も変わりません。
私のルート リストイベントは ImmutableJS で作成されます。
ツリー全体を再チェックせずに、1 つの子コンポーネントのみをチェックするように angular に指示する方法はありますか?
前もって感謝します ;)