0

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

我有绑定到 ion-list 的 firebase 列表

  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>

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

我怎样才能使这项工作？

谢谢你。

4

1 回答 1

1

我猜你已经解决了这个问题，但是对于其他任何人，我在使用 observables 时发现了很多与ionChange（for 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;
于 2017-08-03T17:13:20.373 回答