Ionic2를 사용하여 파이어베이스로 전환

Question

사용자 목록이 있으며이를 사용 가능/사용 불가로 설정하려고합니다.

나는 중포 기지 목록은 이온 목록을 할

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

나는 당신이이 문제를 해결했다 같은데요,하지만 다른 사람을 위해, 나는 (ion-toggles, ion-datetime 및 기타 이온 구성 요소) 관찰 가능한 작업 할 때 ionChange 문제를 많이 찾을 수 있습니다. 나는 대신 ngModelChange을 고수하겠다.

ionChange/ngModelChange으로 변경 이벤트에 바인딩하려는 경우 [(ngModel)]="user.isActive" 대신 단지 [ngModel]="user.isActive"과 같이 모델의 대괄호를 사용하면됩니다. 그렇지 않으면 바나나 인 박스가 모델을 변경하려고합니다.

변경 사항이있는 항목 만 변경하면 DOM에 변경 사항이 다시 적용될 때 trackBy 함수를 사용하십시오.

또한 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;