使用带有 Firebase 的 Ionic2 切换答案

【问题标题】：Using Ionic2 toggle with firebase使用带有 Firebase 的 Ionic2 切换
【发布时间】：2017-04-25 10:40:33
【问题描述】：

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

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

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

我怎样才能做到这一点？

谢谢。

【问题讨论】：

标签： firebase toggle ionic2 ion-toggle

【解决方案1】：

我猜你已经解决了这个问题，但对于其他任何人，我发现ionChange（对于ion-toggles、ion-datetime 和其他 Ionic 组件）在使用 observable 时存在很多问题。我会坚持使用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;

【讨论】：