Ionic 5 - Reset data from ionic-selectable for show different details

Hi Everyone, i’m migrating a Ionic project from Ionic v3 to Ionic v5.

I have a problem that i’m going to relate:

At a Page 1, I select data in an ionic-selectable, by clicking at a list item I navigate foward to Page 2 to show details from the data that I selected at Page 1.

When, I go back to Page 1 (this.navController.navigateBack(‘url-page1’)), to repeat the process, but this time selecting a different data at Page 1. When I navigate foward to Page 2 to show the details from the new data that I selected, it shows the data from my first try, and not the details from the data the I just selected.

How can I reset the data information at Page 1 when going back from Page 2 to Page 1, so I can select new data to show the correct detail at Page 2?
How can I handle the state of ionic-selectable? Should I somehow reload Page 1 before selecting new data (I tried this, but just got a loop of reload)?

Thanks for who can help me in any away

You didn’t post any code, so all I can say is generic.

I can think of two strategies that may be useful:

A. Put the notion of “selected target” into a service provider that is injected by both pages. Expose a method to watch it (returning an Observable) and subscribe to that in page 2, along with a method to set it (and call that from page 1).

B. Include the necessary information in route parameters.

I’m passing the params between Pages using a Service with two methods: setNavData and getNavData

Page 1: recursos-bimestrais-search.page.ts

export class RecursosBimestraisBuscaPage implements OnInit {

  private recurso: Recurso

	private ano: number
	private anos = [2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010]

	private municipio: Municipio
	private listaMunicipios: Municipio[]

	private listaBimestres: Bimestre[]

  constructor(
		private router: Router,
    private provider: RecursosBimestraisService,
		public navCtrl: NavController,
		private navParam: NavparamService,
		// public modalCtrl: ModalController
  ) {
    this.recurso = new Recurso()
	 }

  ngOnInit() {
	// ionViewWillEnter() {
    var estado = new Estado(1, "PB")

		this.provider.getMunicipiosByEstado(estado).then((municipios: Municipio[]) => {
			this.listaMunicipios = municipios
		});
	}

	showRecursosBimestraisInfo(bimestre: Bimestre) {
	  let parametros = {
			municipio: this.municipio,
			certificado: this.recurso.certificado,
			bimestre: bimestre
		};

		this.navParam.setNavData(parametros)
		this.router.navigate(['tabs/recursos-bimestrais-detalhes']);
	}
  
  async municipioSelecionado() {
		this.recurso = undefined
		this.listaBimestres = undefined
		this.ano = 2019

		await this.provider.getRecursosByMunicipio(this.municipio).then((recurso: Recurso) => {
			this.recurso = recurso

			this.listaBimestres = this.recurso.bimestres.filter((bimestre) => {
				return bimestre.ano == this.ano
			})
		})
	}

  anoSelecionado() {
		this.listaBimestres = this.recurso.bimestres.filter((bimestre) => {
			return bimestre.ano == this.ano
		})
	}
	
}

Page 1 : recursos-bimestrais-search.page.html

<ion-content>
	<div class="titulo">
		<br>
		<img src="../../assets/imgs/ezgif.com-gif-maker.png" width="55px" height="55px">
		<h1>Fiscalizo</h1>
		<p>Aqui você ira visualizar os recursos bimestrais que são repassados aos municípios</p>
	</div>
	
	<ion-card>
		<ion-item class="search-select">
			<ion-label style="color: black">Município</ion-label>

			<ionic-selectable
				item-content
				closeButtonText="Cancelar"
				[canSearch]="true"
				[(ngModel)]="municipio"
				itemTextField="municipio"
				[items]="listaMunicipios"
				(onChange)="municipioSelecionado()">
			</ionic-selectable>

		</ion-item>
		
		<ion-item class="search-select">
			<ion-label style="color: black">Ano</ion-label>

			<ionic-selectable
				item-content
				closeButtonText="Cancelar"
				[(ngModel)]="ano"
				[items]="anos"
				(onChange)="anoSelecionado()">
			</ionic-selectable>
			
		</ion-item>
	</ion-card>
	<ion-card *ngIf="listaBimestres?.length > 0">
		<ion-card-header>
			Bimestres
		</ion-card-header>
		<ion-list>
			<ion-item *ngFor="let bimestre of listaBimestres" (click)='showRecursosBimestraisInfo(bimestre)'>{{bimestre.bimestre}}º bimestre</ion-item>
		</ion-list>
	</ion-card>
</ion-content>

Page 2: recursos-bimestrais-details.page.ts

export class RecursosBimestraisDetalhesPage implements OnInit {

  municipio: Municipio
	certificado: PrevidenciaCertificado
  bimestre: Bimestre
  
  data: any;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    public navCtrl: NavController,
    private navParam: NavparamService
  ) {
      this.data = this.navParam.getNavData();
   }

  ngOnInit() {
    console.log(this.data.municipio, this.data.certificado, this.data.bimestre);
  }

  close() {
    // this.navCtrl.navigateBack('tabs/recursos-bimestrais-busca');
    this.navCtrl.navigateRoot('tabs/recursos-bimestrais-busca');
  }

  showPageNotificar(regularidade: Regularidade, tipo: string) {

    let parametros = {
     
      municipio: this.data.municipio,
      bimestre: this.data.bimestre.bimestre,
      ano: this.data.bimestre.ano,
      regularidade: regularidade,
      tipo: tipo,
      certificado: this.data.certificado
    }

    this.navParam.setNavData(parametros)
    this.router.navigate(['tabs/elogio-denuncia']);

  }
}

Page 2: recursos-bimestrais-details.page.html

  • It shows many details about the data that I selected at Page 1

I think getNavData represents a design mistake, because the question then becomes (as you have apparently run into) - “when do I call that?”, a question which I believe has no good answer. I would suggest redesigning your service so that fresh data updates are reactive instead of polled.