変更されたイベントリスナーを介してチェックボックスのチェック属性を設定する方法

Question

angular.js 4（material.angular）のマトリックスにチェックボックスが表示されています。ユーザーがチェックボックスをクリックすると、HTTPリクエストがバックエンドサーバーに送信されます。何らかの理由でバックエンドサーバが利用できない場合やサービスコールが間違っている場合は、チェックボックスを元の状態（チェックボックスをオンにした状態）に戻します。したがって、私は、サービスの呼び出しを行うために、以下の変更のEventHandlerを実装し、サービスコールの結果に依存して反応する：

zuordnungChanged(rolle_id: string, recht_id: string) { 
let a = this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id]; 
if (a === true){ 
    this.rechtematrix.rechtEntziehen(rolle_id, recht_id).subscribe(() => { 
     a = false; 
     this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a; 
     //Notify user 
     }); 
    }, 
    () => { 
     //Notify user 
    }); 
} else { 
    this.rechtematrix.rechtVergeben(rolle_id, recht_id).subscribe(() => { 
     a = true; 
     this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a; 
     //Notify User 
     }); 
    }, 
    () => { 
     //Notify user 
    } 
); 
} 
} 

zuordnungsmatrix変数が定義されており、そのように満たされている：

private zuordnungen: Array<any>; 
    private zuordnungsmatrix = []; 

erstelleZuordnungsmatrix(): void { 
    for (let rolle of this.zuordnungen) { 
     for (let recht of rolle.recht_ids) { 
     this.zuordnungsmatrix["Rolle_" + rolle.rolle_id + "_Recht_" + recht] = true; 
     } 
    } 
    } 

zuordnungsmatrixの値をチェックボックスのチェック属性にチェックしました。

<table td-data-table *ngIf="rechteUndRollenVorhanden()"> 
     <tr> 
     <th td-data-table-column></th> 
     <th td-data-table-column *ngFor="let rolle of rollen" [id]="'Rolle_' + rolle.rolle_id">{{rolle.beschreibung}}</th> 
     </tr> 
     <tr td-data-table-row *ngFor="let recht of rechte" [id]="'Recht_' + recht.recht_id"> 
     <td td-data-table-cell>{{recht.beschreibung}}</td> 
     <td td-data-table-cell *ngFor="let rolle of rollen"> 
      <md-checkbox [id]="'Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id" 
         [checked]="zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false" 
         (change)="zuordnungChanged(rolle.rolle_id, recht.recht_id, $event)">{{zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false}} 
      </md-checkbox> 
     </td> 
     </tr> 
    </table> 

私の問題は、チェックボックスがzuordnungsmatrixの実際の状態を表す方法を知らないことです。変数が更新され、ビューにこの結合は、同様に動作します：

{{zuordnungsmatrix['Rolle_' + rolle.rolle_id + '_Recht_' + recht.recht_id] ? true : false}} 

しかし、私は、チェックボックスを更新するために多くのことを試みたが、それは動作しませんでした。とにかく、チェックボックスのチェック状態の初期設定は正常に動作します。独自のイベントリスナーでチェックボックスの状態を更新するにはどうすればよいですか？

Answer 1

ソリューションは非常に簡単です：

角度は、ワンウェイ-の結合を介して、チェックボックスの変更された値を更新していないいくつかの理由。 checkedステータスを明示的に設定するだけで済みます。これを行うには、パラメータ$eventを使用してHTMLからコンポーネントにイベントを渡すことができます。これはすでに上記の例で行われています。

コンポーネント内のchangeイベントハンドラでは、イベントを読み取り、checkbox要素への参照を取得できます。次に、この要素のchecked属性を設定するだけです（$event.source.checked）。 REST呼び出しが失敗したときに、属性の設定のみが行われていること

zuordnungChanged(rolle_id: string, recht_id: string, event: any) { 
    let a = this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id]; 
    if (a === true){ 
     this.rechtematrix.rechtEntziehen(rolle_id, recht_id).subscribe(() => { 
      //Happy case 
      a = false; 
      this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a; 
      //Notify user 
      }); 
     }, 
     () => { 
      //Bad case 
      event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id]; 
      //Notify user 
     }); 
    } else { 
     this.rechtematrix.rechtVergeben(rolle_id, recht_id).subscribe(() => { 
      //Happy case 
      a = true; 
      this.zuordnungsmatrix["Rolle_" + rolle_id + "_Recht_" + recht_id] = a; 
      //Notify User 
      }); 
     }, 
     () => { 
      //Bad case 
      event.source.checked = this.zuordnungsmatrix['Rolle_' + rolle_id + '_Recht_' + recht_id]; 
      //Notify user 
     } 
    ); 
    } 
} 

注：質問から イベントハンドラは次のようになります。これは、幸いなことに、チェックボックスがユーザーの操作によって自動的に更新されるためです。