使用带有 Firebase 的 Ionic2 切换

Posted 2023-03-16

【中文标题】使用带有 Firebase 的 Ionic2 切换

【英文标题】：Using Ionic2 toggle with firebase

【发布时间】：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>

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

我怎样才能做到这一点？

谢谢。

【参考方案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;