Utiliser Ionic2 basculer avec firebase

Question

J'ai une liste d'utilisateurs, et je veux les activer/désactiver.

I ont la liste firebase binded à la liste d'ions

constructor(public navCtrl: NavController, 
       private af: AngularFire, 
       public cartService: CartService) { 
    this.users = af.database.list('/users') 
    } 

    toggleUserStatus(user) { 
    this.users.update(user.$key, {isActive: user.isActive}) 
     .then(_ => this.cartService.showToast('User ' + ((user.isActive) ? 'Enabled' : 'Disabled'))) 
     .catch(err => this.cartService.showToast(err)); 
    } 

modèle

;

<div *ngFor="let user of users|async"> 
    <ion-item padding> 
    <ion-label>{{user.fullName}}</ion-label> 
    <ion-toggle tappable (ionChange)="toggleUserStatus(user)" [(ngModel)]="user.isActive"></ion-toggle> 
    </ion-item> 
</div> 

Cependant, cela ne fonctionne pas. Son basculement encore et encore.

Comment est-ce que je peux faire ce travail?

Merci.

Answer 1

Je devine que vous CONTOURNÉS, mais pour quelqu'un d'autre, je trouve beaucoup de problèmes avec ionChange (pour ion-toggles, ion-datetime, et d'autres composants ioniques) lorsque vous travaillez avec observables. Je préfère m'en tenir à ngModelChange.

Si vous souhaitez vous lier à un événement de modification avec ionChange/ngModelChange, utilisez simplement les crochets pour le modèle, à savoir [ngModel]="user.isActive" au lieu de [(ngModel)]="user.isActive". Sinon, le banana-in-a-box essaye aussi de changer le modèle.

Et d'utiliser une fonction trackBy lorsque vous avez une liste qui change de sorte que seul l'élément qui change est réécrit dans le DOM. En outre, vous n'avez pas besoin de tappable.

<div *ngFor="let user of users$ | async; trackBy:trackByFn;"> 
    <ion-item padding> 
    <ion-label>{{user.fullName}}</ion-label> 
    <ion-toggle 
    [ngModel]="user.isActive" 
    (ngModelChange)="toggleUserStatus($event, user)"> 
    </ion-toggle> 
    </ion-item> 
</div> 

//----------- 

toggleUserStatus(isChecked, user) { 
    this.users 
    .update(user.$key, {isActive: isChecked}) 
    .then(_ => { 
    // show toast 
    }) 
    .catch(err => { 
    // show error 
    }); 

trackByFn = (idx, obj): string => obj.$key;