在 firebase 中使用 Ionic2 切换

Question

我有用户列表，我想 enable/disable 他们。

我将 firebase 列表绑定到 ion-list

  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 和其他 Ionic 组件）使用可观察对象时。我会改用 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;

在 firebase 中使用 Ionic2 切换

Using Ionic2 toggle with firebase

toggle

firebase

ion-toggle

ionic2