1
Personal I need some help from you. I am trying to show you the information of each ion-card on a Footer. The idea is as follows: On the homepage will have ion-card with summary information of the establishment and on each card has an ion-Fab add which user clicking it will have access to more information. When using ngFOR in the footer it appears the whole independent array of the ion-Fab triggered. You could help in a method so when clicking this button appears only his information?
I’m using 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>
I could explain better where the problem is and how it should be right?
– LeAndrade
in this case when you click on the button inside the card (where each one has a business establishment) the footer appears with more information that it contains in the array referring to the card. The problem is that every time you click appears all the information of all cards. When I do the console.log (info) it shows the id of the establishment but I am unable to make the information about that id appear.
– Thyago Soares Fernandes
Guys, I ran some tests here, and I found a solution. When I press the button ()info the value of the object id is captured and I did the following in the home.ts: noOfItem = 0 (no export class); I added in the button method the following: info(id): void { this.infoRest = ! this.infoRest this.Rest = this.Rest if (this.noOfItem <this.estabelecimentos.length) {this.noOfItem = id;} Else {console.log ("Error")}}. Now in html I did the following in Footer: <div *ngFor= "Let Rest of establishments | Slice: noOfItem-1: noOfItem">. I appreciate the help already. I’m new to programming.
– Thyago Soares Fernandes