Navigation by Id Ionic 2

Question

Navigation by Id Ionic 2

Navigation

#1 by (1 votes)

3

Hello. I'm developing an application with ionic 2 and I have the following situation.

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

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

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

Stores table: [ { "name", "id" } ]

In the API, the 'PublicationId' field of the PUBLICATIONS table is getting the same value as the 'Name' field of the LOJAS table.

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

Thank you in advance.

javascript ionic typescript angular ionic2

asked by anonymous 29.08.2017 / 00:16

1 answer

Delete table row by checkBox Upload with ASP.NET Core json vs formdata

score 1 · Answer 1

To open the list of publications with the id field, simply pass it on when you open the publication screen. Here is an example.

Stores 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>

Publish 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>