在Firebase中使用Ionic2切换

穆罕默德（Mohamed）

我有用户列表，我想启用/禁用它们。

我有火力清单绑定到离子列表

  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>

但是，它不起作用。它一次又一次地切换。

我该如何进行这项工作？

谢谢你。

那是什么

我猜你身边这个工作，但对于其他人，我找了很多的问题与ionChange（对ion-toggles，ion-datetime与观测工作时，等离子成分）。我会坚持ngModelChange。

如果您要通过绑定到change事件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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。