1

Pessoal Preciso de uma ajuda de vocês. Estou tento mostrar a informação de cada ion-card no em um Footer. A idéia é a seguinte: Na homePage terá ion-card com informações resumidas dos estabelecimento e em cada card tem um ion-fab add que usuário clicando ele terá acesso a mais informação. Sendo que utilizando o ngFOR no footer ele aparece todo o array independente do ion-fab acionado. Vocês poderiam ajudar em um método para ao clicar neste botão aparece apenas as informações dele?

Estou usando o IONIC 3.9.2

export class HomePage {


  public estabelecimentos: any;
  public id: any

  rest = true;
  infoRest = false;


  initializeItems(){

    this.estabelecimentos = [
      {id: 1, nome: 'Botequim Bem Ali Bar e restaurantes', avaliacao: '4,5', atracao: 'Banda Bem Bolado', distancia: '5 km', Couvert: 'R$ 20,00', bio:"Um botequim para uma boa conversa, uma boa música, um chopp gelado e a melhor cozinha do estilo. Vem para o Conversa. Sua noite passa por aqui!O Conversa Botequim traz um amplo cardápio de drinks e culinária no melhor estilo botequim gastronômico.O ambiente é inspirado nos botequins do Rio de Janeiro e São Paulo, que ganhou tempero alagoano com conceito e ambientação, resgatando a aura de armazém com elementos modernos, mas ao mesmo tempo com um toque retrô."},
      {id: 2, nome: 'Bar Chopp Toop', avaliacao: '4,6', atracao: 'Banda Top80', distancia: '5 km', Couvert: 'R$ 20,00', bio:"O ambiente é inspirado nos botequins do Rio de Janeiro e São Paulo, que ganhou tempero alagoano com conceito e ambientação, resgatando a aura de armazém com elementos modernos, mas ao mesmo tempo com um toque retrô."},
      {id: 3, nome: 'Disco Gen', avaliacao: '4,1', atracao: 'Dj dhe bothas', distancia: '5 km', Couvert: 'R$ 50,00', bio:"TEste TEste"},
      {id:4, nome: 'Baraco Beach', avaliacao: '4,8', atracao: 'Dj dhe bothas', distancia: '10 km', Couvert: 'R$ 100,00', bio:""},
      {id: 5, nome: 'Loop Bar', avaliacao: '5,0', atracao: 'Dj dhe bothas', distancia: '10 km', Couvert: 'R$ 80,00', bio: ""},
    ]
  }
  constructor( {

      this.initializeItems()

  }
  
  
  
  info(id): void {

    this.infoRest = !this.infoRest
    this.rest = this.rest
    
    console.log(id)

  }
  
    <ion-card *ngFor='let bares of estabelecimentos'>
  <ion-card-title>
                {{bares.nome}}
            </ion-card-title>
          <p style="font-size: 1.0rem; font-style: italic">Avaliação: {{bares.avaliacao}}</p>
          <p style="font-size: 1.1rem;"> Atracção de Hoje: {{bares.atracao}}</p>
          <ion-row>
            <ion-col col-5>
              <p style="font-size: 1.1rem;">Dist.: {{bares.distancia}}</p>
            </ion-col>
            <ion-col col-7>
              <p style="font-size: 1.1rem; color:blue"> Couvert: {{bares.Couvert}}</p>
            </ion-col>
            </ion-row>


      </ion-card-content>
      </ion-col>

      <ion-col col-2>
          <ion-fab middle right>

            <button ion-fab mini (click)="info(bares.id)"><ion-icon name="add"></ion-icon></button>

          </ion-fab>
        </ion-col>

    </ion-row>
      </ion-card>
      
      
      <!--Inicio FOOter-->
      
       <div *ngIf="infoRest" [@infoRest] class="mg-top-10">
      <ion-footer no-border class="bg-info center">
        <ion-grid>
          <ion-row>
            <ion-col col-sm-12>
              <div id="close">
                <img src="../../assets/imgs/close.png" (click)="close()">
              </div>
              <div *ngFor= "let rest of estabelecimentos
              | slice:0 let info=index">
                <p>{{rest.bio}}</p>

              </div>


              </ion-col>
            </ion-row>
          </ion-grid>

        </ion-footer>

3
  • Poderia explicar melhor onde está o problema e como deveria ser o correto?
    – LeAndrade
    Commented 15/07/2019 às 19:10
  • neste caso quando clicar no button dentro do card(onde cada um tem um estabelecimento comercial) o footer aparecer com mais informação que contém no array referente ao card. O problema é que toda vez que clicar aparece todas as informações de todos os cards. Quando faço o console.log (info) ele mostra o id do estabelecimento mas não estou conseguindo fazer que apareça as informações referente aquele id. Commented 16/07/2019 às 17:00
  • Pessoal fiz uns testes aqui e achei uma solução. Quando aciono o button ()info o valor do id do objeto é capturado e fiz o seguinte no home.ts: noOfItem = 0 (no export class); adicionei no método do button o seguinte: info(id): void { this.infoRest = !this.infoRest this.rest = this.rest if (this.noOfItem <this.estabelecimentos.length) {this.noOfItem = id;} else {console.log ("Error")}}. Agora no html fiz o seguinte no Footer: <div *ngFor= "let rest of estabelecimentos | slice: noOfItem-1: noOfItem">. Agradeço a ajuda desde já. Sou novato na programação. Commented 16/07/2019 às 17:45

0

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

Pesquise outras perguntas com a tag .