Navigation by Id Ionic 2

Question

hello. I am developing an application with Ionic 2 and I am with the following situation.

I have 2 tables, 'stores' and 'publications'.

My question is, how to do from the 'store' listing to open each post, according to the name of each one that appears in the listing.

Publication table: [ { "description", "date", or "id", "publicacaoId" } ]

Table stores: [ { "name", "id" } ]

In the API, the 'publicacaId' field of the PUBLICACOES table is receiving the same value as the 'name' field of the STORES table.

If you have an example with this database situation will be useful.

Thanks in advance.

Answer 1

for Bir the listing of posts with the id field just pass it at the time of opening the publish screen. Below is an example.

Store screen

/**
 * Nativos
 */
import { NavController, NavParams, AlertController, Platform } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';

/**
 * Paginas
 */
import { PublicacaoPage } from '../pages/publicacao/publicacao';

@Component({
  templateUrl: 'loja.html'
})
export class LojaPage {

  lojas: Array<{title: string, icon: string, component: any}>;

  constructor(public navCtrl: NavController,) {
    this.lojas = [
      { nome: 'Loja 1', id: 1 },
	    { nome: 'Loja 2', id: 2 },
	    { nome: 'Loja 3', id: 3 },
    ];

  }

  /**
	* Aqui você faz com que o método de nav abra a pagina de publicação com id referente a loja
	*
	*/
  abrirPublicacao(loja) {
    // O segundo parametro do push, são os parametros passados para a próxima pagina
	  this.navCtrl.push(PublicacaoPage, {nome: loja.nome})
  }
}

<ion-list no-border>
    <ion-item *ngFor="let l of lojas" (click)="openPage(p)">
      <div class="item-menu">{{l.nome}}</div>
  </ion-item>
</ion-list>

Publishing screen

/**
 * Nativos
 */
import { Component } from '@angular/core';
import {NavController, NavParams } from 'ionic-angular';

@Component({
  templateUrl: 'publicacao.html'
})
export class PublicacaoPage {
  publicacaoId: any;
  publicacoes:Array<any>;
  
  constructor(public navParams: NavParams) {
    // Captura o valor passado como parâmetro na tela anterior
    this.publicacaoId = this.navParams.get("nome");
    this.buscarPublicaceos();
  }
  
  
  //Agora basta fazer a lógica de buscar os dados na API passando o valor recuperado no atributo publicacaoId
  buscarPublicacoes() {
  }
}

<ion-list>
  <ion-item *ngFor="let p of publicacoes">
      <div class="item-menu">{{p.descricao}}</div>
  </ion-item>
</ion-list>