I want to show the loading controller until data is fetched from the server. But the loader is getting dismissed but data is not shown on the page.
I have posted two images. The first image shows data is not displayed on the page and the second image shows console.log values. I am getting proper values on console.log but not getting displayed.
If I refresh the page again it is working fine.
Whats gone wrong? Please help
.ts
import { LoadingController } from '@ionic/angular';
constructor(public loadingController : LoadingController ) { }
ngOnInit() {
this.present()
this.razorpay = new Razorpay({
key : 'rzp_test_rHtoop1fZXneoh',
key_secret: 'Rle0yzx7WK93CKaeCufQGnA6'
})
this.razorpay.once('ready', async (response) => {
this.banks = response.methods.netbanking
console.log(this.banks)
this.hdfc = response.methods.netbanking.HDFC
console.log(this.hdfc)
this.icici = response.methods.netbanking.ICIC
console.log(this.icici)
this.idbi = response.methods.netbanking.IBKL
console.log(this.idbi)
this.kotak = response.methods.netbanking.KKBK
console.log(this.kotak)
this.sbi = response.methods.netbanking.SBIN
console.log(this.sbi)
this.axis = response.methods.netbanking.UTIB
console.log(this.axis)
this.display = true
this.dismiss()
})
}
async present() {
this.isLoading = true;
return await this.loadingController.create({
duration: 5000,
}).then(a => {
a.present().then(() => {
console.log('presented');
if (!this.isLoading) {
a.dismiss().then(() => console.log('abort presenting'));
}
});
});
}
async dismiss() {
this.isLoading = false;
return await this.loadingController.dismiss().then(() => console.log('dismissed'));
}
}
.html
<ion-list>
<ion-list-header>
Popular banks
</ion-list-header>
<ion-item (click)="selected_bank('HDFC')">
<div>
<img src="assets/banklogo/hdfc.png" height="50" width="50">
</div>
<ion-label>
{{hdfc}}
</ion-label>
<ion-icon name="arrow-dropright" slot="end" ></ion-icon>
</ion-item>
<ion-item (click)="selected_bank('ICIC')">
<div>
<img src="assets/banklogo/icici.jpg" height="40" width="50">
</div>
<ion-label>
{{icici}}
</ion-label>
<ion-icon name="arrow-dropright" slot="end" ></ion-icon>
</ion-item>
<ion-item (click)="selected_bank('KKBK')">
<div>
<img src="assets/banklogo/kotak3.jpg" height="40" width="50">
</div>
<ion-label>
{{kotak}}
</ion-label>
<ion-icon name="arrow-dropright" slot="end" ></ion-icon>
</ion-item>
<ion-item (click)="selected_bank('SBIN')">
<div>
<img src="assets/banklogo/sbi2.png" height="30" width="40">
</div>
<ion-label>
{{sbi}}
</ion-label>
<ion-icon name="arrow-dropright" slot="end" ></ion-icon>
</ion-item>
<ion-item (click)="selected_bank('IBKL')">
<div>
<img src="assets/banklogo/idbi2.png" height="40" width="40">
</div>
<ion-label>
{{idbi}}
</ion-label>
<ion-icon name="arrow-dropright" slot="end" ></ion-icon>
</ion-item>
</ion-list>
<ion-list *ngIf="display">
<ion-list-header>
All banks
</ion-list-header>
<ion-item *ngFor="let bank of banks | keyvalue " (click)="selected_bank(bank.key)">
<ion-label>
{{bank.value }}
</ion-label>
<ion-icon name="arrow-dropright" slot="end"></ion-icon>
</ion-item>
</ion-list>