Использование Ionic2 toggle с firebase

Question

У меня есть список пользователей, и я хочу включить/отключить их.

Я firebase список переплетены ион-лист

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

шаблон;

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

Однако это не работает. Его снова и снова снова.

Как это сделать?

спасибо.

Answer 1

Я предполагаю, что вы работали вокруг этого, но для кого-то еще, я нахожу много проблем с ionChange (для ion-toggles, ion-datetime и других компонентов Ионных) при работе с наблюдаемыми. Вместо этого я придерживаюсь ngModelChange.

Если вы собираетесь привязываться к событию изменения с помощью ionChange/ngModelChange, просто используйте скобки для модели, то есть просто [ngModel]="user.isActive" вместо [(ngModel)]="user.isActive". В противном случае банана в коробке также пытается изменить модель.

И используйте функцию trackBy, если у вас есть список, который изменяется, поэтому только переменная, которая изменяется, перезаписывается в DOM.

Кроме того, вам не нужно 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;