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>