Ionic 2 - ion-toggle problem


#1

I have a list of custom components with the toggle inside each component where it is supposed to show/hide additional actions on the screen. On the browser it works perfectly but on Android and IOS they get all messed up. Instead of showing the ui inside its own component it triggers others. I believe it could be related to having multiple toggles with the same properties. Should I reference somehow the element i am targeting? if so how would i do that?

<ion-toggle [(ngModel)]="_item.checked" (ionChange)="onToggleChange($event, _item)" color="secondary"></ion-toggle>

here the ui it is supposed to control (now i am using ngIf to see if it works)

<ion-col col-10 offset-1 col-md-8 offset-md-2 flex-col align-center justify-center *ngIf="_item.checked"> </ion-col>

here is my custom component class

export class CheckDocumentacaoItemComponent {

  protected _dateMask:any;
  protected _buttonColor:string = 'primary';
  protected _buttonText:string = 'Salvar Item';

  private _item:any = {};
  @Input() 
  set item(val:any){
    this._item = val;
    this.setupItem();
  }

  constructor(
    private events:Events,
    private alertCtrl:AlertController,
    private baseService:BaseService,
    private checklistService:ChecklistService,
    private dateService:DateService
    ){
    moment.locale('pt-BR');
    this._dateMask = this.dateService.maskDateOptions;
  }

  ngOnInit(){
    this.evtSubscribe();
    console.log('onInit');
  }
  ngOnDestroy(){
    this.evtUnsubscribe();
  }

  protected evtSubscribe(){
    this.events.subscribe('documentRecord:saved', 
      (record)=>{
        
        if(this._item.id == record.id){
          console.log('DOC CHECK SAVED ID: ', record.id);
          if(this._item.date && this._item.date.indexOf('-') != -1){
              this._item.date = this.dateService.reverseDate(this._item.date);
          }
          this._buttonColor = 'secondary';
          this._buttonText = 'Atualizar Item';
          this._item.checked = true;

        }
      });
  }

  protected evtUnsubscribe(){
    this.events.unsubscribe('documentRecord:saved');
  }

  protected setupItem(){
    if(!this._item) return;

    this._item.checked = false;

    if(this._item.date && this._item.date.indexOf('-') != -1){
        this._item.date = this.dateService.reverseDate(this._item.date);
    }

    if(this._item.saved){
      this._buttonColor = 'secondary';
      this._buttonText = 'Atualizar Item';
      this._item.checked = true;
    }
    //console.log(this._item);
  }

  protected onToggleChange(ev, item){
    item.checked = ev._checked;
    console.log('onToggleChange', item.id, item.checked, ev._checked);
  }

  protected saveItem(item){
    this.checklistService.saveDocumentRecord(item);
  }

  private toggleEditMode(item){
    item.editMode = !item.editMode;
  }

  private togglePhotoMode(item){
    item.photoMode = !item.photoMode;
  }

}

My system infos:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.5.0
Xcode version: Xcode 8.1 Build version 8B62

Android Infos:
Tablet LG
Android 5.0.2

IOS Infos
IPhone 5s
IOS 8.4

Any help would be very much appreciated!
thank you all


#2

For one thing, do not attempt to access private controller properties from the template. ngc doesn’t like that, and last I checked will blow up on you in production mode. Everything you access from the template must be public on the controller side. Secondly, why do you have both two-way binding and an onChange listener? Does anything improve if you get rid of the onToggleChange?


#3

@rapropos
Thanks for the reply!
Good to know about the private properties, I’ll fix that!
I tried the ionChange after I realised the toggles weren’t working properly on Android and IOS. In the browser it is perfect, but on the Devices it breaks everything.
When I set the _item with the @Input it works, it changes de UI properly but when I tap a toggle that is not checked yet sometimes it triggers its own ui, sometimes other toggle’s ui and othertimes it doesn’t trigger anything! I’m sure I’m missing something maybe a reference I dont know!

here is how it is supposed to work:

  1. Unchecked

2.Checked