Ionic2を使用して火災基地とトグルを交換する

Question

私はユーザのリストを持っており、それらを有効/無効にしたい。

私は

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

テンプレートをリストにイオンにバインドさfirebaseリストを持っています。

<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

私はあなたがこの問題を回避働い推測しているが、他の誰のために、私は（ion-toggles、ion-datetime、および他のイオン性コンポーネント用）の観測で作業するときionChangeの問題の多くを見つけます。私は代わりにngModelChangeに固執します。

ionChange/ngModelChangeで変更イベントにバインドする場合は、モデルに角括弧（[ngModel]="user.isActive"）の代わりに[(ngModel)]="user.isActive"を使用してください。さもなければ、バナナ・イン・ボックスはモデルを変更しようとしています。

そして、変更点が変更された項目だけがDOMに書き直されるようにするときは、trackBy関数を使用してください。

また、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;