1

こんにちは、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 に指示する方法はありますか?

前もって感謝します ;)

4

0 に答える 0