2016-02-25 21 views
15

L'app sta funzionando correttamente, ma perché la funzione dell'evento change non viene attivata?Ionic2 attiva/disattiva l'evento di modifica del componente

Template:

<ion-list> 
    <ion-item-sliding *ngFor="#item of items"> 
     <ion-item> 
     <ion-label>{{item.title}}</ion-label> 
     <ion-toggle [(ngModel)]="item.completed" (change)="updateItem(item)"></ion-toggle> 
     </ion-item> 
     <ion-item-options> 
     <button primary (click)="editItem(item)"> 
      <ion-icon name="edit"></ion-icon>Edit 
     </button> 
     <button secondary (click)="deleteItem(item)"> 
     <ion-icon name="delete"></ion-icon>Delete 
     </button> 
     </ion-item-options> 
    </ion-item-sliding> 
    </ion-list> 

Classe:

export class Todos { 
... 
    updateItem(item) { 
    alert(1) 
    this._todosService.update(item).subscribe(
     response => { this.getItems(); } 
    ); 
    } 
... 
} 
+1

Sembra https://github.com/driftyco/ionic/issues/5034 Non ho trovato '' per attivare un evento 'change'. Puoi collegare a documenti quali eventi viene generato? Io non uso io stesso Ionic. –

+0

http://ionicframework.com/docs/v2/api/components/toggle/Toggle/ – Dave

+0

Hai provato l'evento 'ngModelChange'? –

risposta

32

Secondo il documento, è possibile farlo:

<ion-toggle [(ngModel)]="item.completed" (ionChange)="updateItem(item)" checked="false"></ion-toggle> 

Speranza vi aiuterà!

+0

Hey, grazie. Sì, questo non funzionava quando ho posto la domanda. Ma questo è corretto ora. – Dave

+1

ionChange deve essere menzionato nei documenti \t ionicframework.com/docs/v2/api/components/toggle/Toggle – Luckylooke

4

aggiornamento

<ion-toggle [(ngModel)]="itemCompleted"></ion-toggle> 
export class Todos { 
    get itemCompleted() { 
    return item.completed; 
    } 
    set itemCompleted(value) { 
    item.completed = value; 
    updateItem(item); 
    } 

    ... 
    updateItem(item) { 
    alert(1) 
    this._todosService.update(item).subscribe(
     response => { this.getItems(); } 
    ); 
    } 
    ... 
} 

originale

Quando [(ngModel)]="..." opere, questo

(ngModelChange)="updateItem(item)" 

dovrebbero funzionare come bene e probabilmente fare quello che si tenta di realizzare.

+1

In ulteriori test, questa non è una risposta soddisfacente in quanto chiama l'evento change quando i commutatori vengono sottoposti a rendering per la prima volta. Questo non è il risultato desiderato. Sembra che l'evento (change) non sia effettivamente un bug nell'ultima beta di Ionic 2. – Dave

1

Se il valore iniziale è true, ionChange non è utile perché è trigger ogni volta.

<ion-toggle [(ngModel)]="item.completed" (ngModelChange)="updateItem(item)"></ion-toggle> 

Spero che questo sia utile!