Problem in populating data on ngOnInit on template. How to fix?


#1

Friends,
I am using a form page where 3 combo ( which populate data from a web service) for a Search. When reach the page if NET Connectivity lost i use a ‘Network Service’ Provider to refresh and call the same function of Constructor . But on calling that in Refresh() all data values come on console , but not populate in form combo’s. I added my controller code as below:

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController } from 'ionic-angular';
import { ProjectplanProvider } from "../../providers/projectplan/projectplan";
import { NetworkServiceProvider } from "../../providers/network-service/network-service";
import {GlobalProvider} from "../../providers/global/global";
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { Storage } from '@ionic/storage';
import { Subject } from 'rxjs/Subject';
// For network
//import { Network } from '@ionic-native/network';

/**
 * Generated class for the ProjectplanPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-projectplan',
  templateUrl: 'projectplan.html',
})
export class ProjectplanPage implements OnInit {
  formgroup:FormGroup;
  financialYear:AbstractControl;
  projectCategory:AbstractControl;
  projectSector:AbstractControl; 
  private yearMasterSub$ = new Subject<any>();
  private categorySub$ = new Subject<any>();    
  private sectorTypeSub$ = new Subject<any>();    
  private yearMaster$ = this.yearMasterSub$.asObservable();
  private category$ = this.categorySub$.asObservable();
  private sectorType$ = this.sectorTypeSub$.asObservable();
  data:any = {};
  result: any;
  resultdesc: any;
  searchFlag: boolean = false;
  connectivityFlag: boolean = false;
  selectedItem: boolean = false;
  year: any;
  public category: any=0;
  public sector: any=0;
  public lbid: number;
  public lbname: string;
  public distid: number;
  public lbtype: number;
  constructor(public navCtrl: NavController, public navParams: NavParams, 
              public projectplanprovider: ProjectplanProvider,
              public networkserviceprovider: NetworkServiceProvider,
              public formbuilder: FormBuilder,
              private alertCtrl: AlertController,
              public loadingController: LoadingController,
              public global1:GlobalProvider,
              private storage: Storage
              ) {
                this.formgroup = formbuilder.group({
                  financialYear:['',Validators.required],
                  projectCategory:['',Validators.required],
                  projectSector:['',Validators.required],
                });
                this.financialYear = this.formgroup.controls['financialYear'];
                this.projectCategory = this.formgroup.controls['projectCategory'];
                this.projectSector = this.formgroup.controls['projectSector'];
                this.data.financialYear = '';
                this.data.projectCategory = '';
                this.data.projectSector = '';   
                alert("first");
                this.getYearMaster();      
                this.getCategory();     
                this.getSectorType();
  }
  public ngOnInit() {
    //alert("inside ngOnInit");
    //this.yearMaster$.subscribe(yearMaster => this.yearMaster = yearMaster);
    this.networkserviceprovider.refresh$.subscribe(() => this.refresh());
  }  
  
  refresh() {
        alert("inside refresh");

        
        
        this.getYearMaster();      
        this.getCategory();     
        this.getSectorType();
  } 
  getYearMaster() {
    /*let loader = this.loadingController.create({
      content: "Loading  Financial Year ... "
    });
    loader.present();*/
    if(this.global1.getnetwork())
    {
    this.projectplanprovider.getYearMaster()
    .then(data => {
      this.year = data;
      alert("yeardata:"+JSON.stringify(data));
      this.yearMasterSub$.next(data);
      //loader.dismiss();
    });
  } else {
    //loader.dismiss();
    this.presentAlert();
  }

}
  getCategory() 
  {
    /*let loader = this.loadingController.create({
      content: "Loading  Project Category ... "
    });  
    loader.present();*/
    if(this.global1.getnetwork())
    {
      this.connectivityFlag = true;
      this.projectplanprovider.getCategory()
      .then(data => {
        //this.searchFlag = true;
        this.category = data;
        alert("categorydata:"+JSON.stringify(data));
        this.categorySub$.next(data);
        //loader.dismiss();
      });
    } else {
      //loader.dismiss();
      this.presentAlert();
    } 
  }

  getSectorType() 
  {
    /*let loader = this.loadingController.create({
      content: "Loading  Project Sector ... "
    });  
    loader.present();*/
    if(this.global1.getnetwork())
    {
      this.connectivityFlag = true;
      this.projectplanprovider.getSectorType()
      .then(data => {
        //this.searchFlag = true;
        this.sector = data;
        alert("sectordata:"+JSON.stringify(data));
        this.sectorTypeSub$.next(data);
       //loader.dismiss();
      });
    } else {
     // loader.dismiss();
      this.presentAlert();
    } 
    /*if(loader) {
      loader.dismiss();
    }*/
    //loader.present().then(() => { loader.dismiss(); });
  } 

  getProjectList(financialyear,projectcategory,projectsector,lbid) 
  {
    //alert(lbid);
    //alert("fy:"+financialyear);
    let loader = this.loadingController.create({
      content: "Loading  Project(s) ... "
    });  
    loader.present();
    if(this.global1.getnetwork())
    {
      this.connectivityFlag = true;
      this.selectedItem = false;
      this.projectplanprovider.selectApprovalDetails(lbid,projectcategory,projectsector,financialyear)
      .then(data => {
        this.searchFlag = true;
        this.result = data;
        //alert("searchresul: "+JSON.stringify(data));
        loader.dismiss();
      });
    } else {
      loader.dismiss();
      this.presentAlert();
    } 


  }


  selectProjectDetails(lbid,yearid,projectno) 
  {
    let loader = this.loadingController.create({
      content: "Loading project details ... "
    });  
    loader.present();
    if(this.global1.getnetwork())
    {
      this.selectedItem = true;
      this.connectivityFlag = true;
      this.projectplanprovider.selectProjectDetails(lbid,yearid,projectno)
      .then(data => {
        this.searchFlag = true;
        this.result = data;
        this.resultdesc = data;
        loader.dismiss();
      });
    } else {
      loader.dismiss();
      this.presentAlert();
    }
  }
  
  presentAlert() 
  {
      let alert = this.alertCtrl.create({
        title: 'No Network',
        subTitle: 'You are offline, please be online to search project plan(s)',
        buttons: ['OK']
      });
      alert.present();
  }

  async ionViewDidEnter() {
    await this.fetchLBSettings();  
    await this.getLBSettings();
    if(this.global1.getnetwork())
    {
      this.getYearMaster();
      //alert(this.year);
      this.connectivityFlag = true;

    } else {
      this.presentAlert();
    }  

  }

  async fetchLBSettings() 
  {
    let lbid = await this.storage.get('lbid');
    let lbname = await this.storage.get('lbname');
    let distid = await this.storage.get('distid');
    let lbtype = await this.storage.get('lbtype');
    if(lbid) { 
      //set the value already ...
    } else {
      //Default value if not set before
      this.storage.set('lbid', 290);
      this.storage.set('lbname', 'Amboori Grama Panchayat');
      this.storage.set('distid', 1);
      this.storage.set('lbtype', 5);
    }
  }

  async getLBSettings()
  {
    this.lbid = await this.storage.get('lbid');
    this.lbname = await this.storage.get('lbname');
    this.distid = await this.storage.get('distid');
    this.lbtype = await this.storage.get('lbtype');
  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad ProjectplanPage');
  }

}

Please advise how this issue can be fixed

Thanks

Anes


#2

Try to use Life cycle events of ionic
link :- https://ionicframework.com/docs/api/navigation/NavController