如何通過其changed-eventlistener設置複選框的checked-attribute

我在angular.js 4（with material.angular）中填充了複選框。當用戶點擊一個複選框時，HTTP-Request被髮送到後端服務器。如果後端服務器不可用或服務調用出於任何原因而出現錯誤，我希望複選框返回到之前的狀態（選中/未選中）。因此，我實現下列變化事件處理程序，使服務調用和反應依賴於服務調用的結果：如何通過其changed-eventlistener設置複選框的checked-attribute

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的值綁定到類似於此的複選框'checked-attribute：

<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}}

但我嘗試了很多更新的複選框，但它沒有工作。無論如何，複選框'checked-state'的初始設置工作正常。我如何更新自己的事件監聽器中的複選框狀態？

來源

2017-06-21 Michael L.

你看過https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D嗎？ – Tschallacka

是的，我有，但你發佈的文件是角度<2.0 –

的解決方案是非常簡單的：

出於某種原因角不通過單向綁定更新複選框的變化值。您只需明確設置checked狀態。爲此，您可以通過參數$event將事件從HTML傳遞到組件。這已經在上面的例子中完成了。

在組件中的change事件處理程序中，您可以讀取事件並獲取對複選框元素的引用。所有你需要做的就是設置這個元素的檢查屬性（$event.source.checked）。從問題的事件處理現在看起來是這樣的：

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 
     } 
    ); 
    } 
}

需要注意的是該屬性設置時進行，當REST調用失敗。這是因爲在快樂情況下，複選框會通過用戶交互自動更新。

來源

2017-07-06 09:31:42

如何通過其changed-eventlistener設置複選框的checked-attribute

回答

相關問題