3

olá. Estou desenvolvendo um aplicativo com ionic 2 e estou com a seguinte situação.

tenho 2 tabelas, 'lojas' e 'publicacoes'.

Minha dúvida é, como fazer para a partir da listagem de 'loja' abrir cada publicação, de acordo com o nome de cada uma que aparecer na listagem.

Tabela publicacoes: [ { "descricao", "data" , "id", "publicacaoId" } ]

Tabela lojas: [ { "nome", "id" } ]

Listagem das lojas

Na API, o campo 'publicacaoId' da tabela PUBLICACOES está recebendo o mesmo valor que o campo 'nome' da tabela LOJAS.

Caso tiverem um exemplo com essa situação com banco de dados será util.

Desde já agradeço.

1 Resposta 1

1

para abir a listagem das publicações com o campo id basta passar ele no momento de abrir a tela de publicação. Segue abaixo exemplo.

Tela de lojas

/**
 * 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>

Tela de publicação

/**
 * 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>

1
  • Olá Wanderson Aparecido. Obrigado pelo retorno. Commented 30/08/2017 às 22:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .