Gli eventi non vengono attivati ​​all'interno delle caselle Angular2

Question

Ho provato tutto quello che posso pensare per attivare gli eventi quando una casella di controllo cambia stato ma non riesco a farlo funzionare.

Ecco il codice html

<div *ngIf="role?.ACTIVE_FLAG === 'Y'"> 
    <div class="label"> Active Record </div> 
     <input type="checkbox" (click)="toggleRoleActive()" checked> 
</div> 
<div *ngIf="role?.ACTIVE_FLAG === 'N'"> 
    <div class="label"> Active Record </div> 
     <input type="checkbox" (click)="toggleRoleActive()"> 
</div> 

Ecco toggleRoleActive()
Edit:

toggleRoleActive(){ 
    if(this.role_submit.ACTIVE_FLAG === 'Y'){ 
     this.role_submit.ACTIVE_FLAG = 'N'; 
    }else { 
     this.role_submit.ACTIVE_FLAG = 'Y'; 
    } 
} 

Una delle sfide che sto affrontando, è il tasto ha la necessità di essere controllati o non controllati quando ottengo i dati dal server. Ma se vogliono disattivare o riattivare il ruolo mi piacerebbe che risponda alla casella di controllo.

Ho provato con [(ngModel)], (change) e molto più semplici soluzioni, ma l'unica cosa che ha fatto scattare tutti gli eventi a tutti è [(ngModel)], ma farlo in questo modo io alla fine con true/false invece di 'Y'/'N'. Inoltre, se utilizzo [(ngModel)], la casella di controllo è sempre contrassegnata come selezionata indipendentemente dai dati inviati dal mio server.

Answer 1

È possibile gestire l'assegnazione e il cambiamento gestore di eventi separatamente:

<input type="checkbox" 
    [ngModel]="role?.ACTIVE_FLAG === 'Y' ? true : false"   
    (ngModelChange)="toggleRoleActive()" checked> 

Answer 2

ho avuto a che fare con le caselle di controllo come questo

<input #myId type="checkbox" (change)="myProp = myId.checked" /> 

Il componente ha una proprietà myProp definito

Ecco le più info + una demo http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0