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