I have this in my html
<ion-col col-3 align="right">
<ion-item>
<ion-label>Show as</ion-label>
<ion-select [ngModel]="SelectedView" (ngModelChange)="onViewChange($event)>
<ion-option value="List">List</ion-option>
<ion-option value="Map">Map</ion-option>
</ion-select>
</ion-item>
</ion-col>
and this in my customer.ts file
export class customerpage implements OnInit {
constructor(public modalCtrl: ModalController,
public popoverCtrl: PopoverController,
private _customerservice: CustomersService,
public navCtrl: NavController,
public navParams: NavParams) {
this.ListPositions = [];
this.customersArray = [];
this.customersView = [];
}
ngOnInit() {
this.SelectedCategory = "";
this.customersArray = [];
this.customersView = [];
setTimeout(() => {
this.GetCustomers();
}, 500);
}
GetCustomers() {
const arrayofroles$ = this._customerservice.GetAllCustomers();
arrayofroles$.subscribe(res => {
this.customersArray = res; //Initially both arrays are the same
this.customersView = this.customersArray;
},
err => { },
() => {
this.loadingCustomers = false;
});
}
ionViewDidLoad(): void {
}
onViewChange(event: any, Customers: any) {
this.initMap(Customers);
}
initMap(Customers: any) {
this.customersView; // UNDEFINED!
}
}
Initially,on nginit, I am loading the customersview from the database. OnViewchange from the html I am calling initmap function and trying to access cutomersview but it is giving me undefined for my local variable.
One solution could be : It seems like you have data syncing problem.
// return subscription from this method
getCustomers() {
const customerSubscription = this._customerservice.GetAllCustomers();
return customerSubscription;
}
onViewChange(event: any) {
this.getCustomers()
.subscribe((customers: any) => {
this.initMap(customers);
});
}