1

A minha pergunta é a seguinte. Eu criei uma matriz simples, com nomes de animais. Para cada nome eu gero um botão dinamicamente, e manipulo o DOM deste botão para obter uma cor para quando selecionado, e uma cor para quando não estiver selecionado. Isso funciona bem e consigo montar a matriz corretamente conforme a imagem abaixo:

inserir a descrição da imagem aqui

E aqui está o console com o retorno que obtenho:

inserir a descrição da imagem aqui

Agora o que eu preciso é. Vamos supor que eu selecione esses animais e os envie ao banco de dados do firebase, quando eu retornar a query com os animais escolhidos, eu gostaria que esses botões já viessem coloridos, igual a imagem acima. Não faço a mínima ideia de como fazer isso, alguma ajuda?

O trecho de código que consegui até agora foi este:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-testes',
  templateUrl: 'testes.html',
})
export class TestesPage {

animais: Array<any> = [
  {nome: 'Cachorro', value: 'cachorro'},
  {nome: 'Gato', value: 'gato'},
  {nome: 'Passaro', value: 'passaro'},
  {nome: 'Papagaio', value: 'papagaio'},
  {nome: 'Urso', value: 'urso'},
  {nome: 'Girafa', value: 'girafa'},
  {nome: 'Pinguim', value: 'pinguim'},
  {nome: 'Macaco', value: 'macaco'},
  {nome: 'Tartaruga', value: 'tartaruga'},
  {nome: 'Pato', value: 'pato'},
  {nome: 'Galinha', value: 'galinha'},
  {nome: 'Onca', value: 'onca'},
  {nome: 'Jacare', value: 'jacare'},
  {nome: 'Lagarto', value: 'lagarto'},
  {nome: 'Leopardo', value: 'leopardo'}
];

animaisEscolhidos: Array<any> = [];

@ViewChild('botaoAnimal') botaoAnimal: any;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

escolherAnimal(animal, botaoAnimal){
  botaoAnimal.selecionado = !botaoAnimal.selecionado;
  /**Aqui eu construo o array de animais, se o botão esta selecionado recebe 
uma cor diferente */
  if (botaoAnimal.selecionado == true) {
    botaoAnimal._elementRef.nativeElement.style.background = '#E83584';
    botaoAnimal._elementRef.nativeElement.style.color = '#FFFFFF';
    this.animaisEscolhidos.push(animal);
    console.log(this.animaisEscolhidos);
  } else {
  /**Se o botão for desmarcado o botão recebe a cor original e remove o item 
  do array */
  botaoAnimal._elementRef.nativeElement.style.background = 'transparent';
  botaoAnimal._elementRef.nativeElement.style.color = '#E83584';
  let index = this.animaisEscolhidos.indexOf(animal);
  if (index > -1) {
    this.animaisEscolhidos.splice(index, 1);
    this.animaisEscolhidos = this.animaisEscolhidos;
  }
 }

}

Meu HTML:

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <ion-scroll scrollX="true">
          <button #botaoAnimal ion-button round outline *ngFor="let animal 
           of animais" (click)="escolherAnimal(animal, botaoAnimal)">
           {{animal.nome}}
          </button>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Obs: As querys do firebase não são um problema, eu sei fazer. Só precisaria saber como colorir os botões de acordo com as informações que vem do banco de dados.

2
  • Não entendi, qual sua dificuldade, se o retorno da Api é um array de objetos igual ao que fez mocado?
    – LeAndrade
    Commented 29/08/2019 às 19:31
  • Sim, isso é simples. A dificuldade está no seguinte, se o usuário escolheu por ex: cachorro e galinha, eu gostaria de colorir apenas esses dois botões entende. Não sei como fazer isso, só consegui colori-los quando selecionado na hora. Commented 29/08/2019 às 19:33

1 Resposta 1

4

Tem um jeito bem mais fácil de fazer isso, basta ter uma propiedade selecionado pra cada elemento do array que começa vazio e depois com base se tiver selecionado ter um ng class.

import { Component, ViewChild,OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-testes',
  templateUrl: 'testes.html',
})
export class TestesPage implements OnInit {

animais: Array<any> = [
  {nome: 'Cachorro', value: 'cachorro'},
  {nome: 'Gato', value: 'gato'},
  {nome: 'Passaro', value: 'passaro'},
  {nome: 'Papagaio', value: 'papagaio'},
  {nome: 'Urso', value: 'urso'},
  {nome: 'Girafa', value: 'girafa'},
  {nome: 'Pinguim', value: 'pinguim'},
  {nome: 'Macaco', value: 'macaco'},
  {nome: 'Tartaruga', value: 'tartaruga'},
  {nome: 'Pato', value: 'pato'},
  {nome: 'Galinha', value: 'galinha'},
  {nome: 'Onca', value: 'onca'},
  {nome: 'Jacare', value: 'jacare'},
  {nome: 'Lagarto', value: 'lagarto'},
  {nome: 'Leopardo', value: 'leopardo'}
];

constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ngOnInit(){
   this.animais=this.animais.map(animal=>{
      return {...animal, selecionado: false}
  }
}

escolherAnimal(animal){
  animal.selecionado = !animal.selecionado; 
 }    
}

no seu html

<ul class="animais">
  <li (click)="escolherAnimal(animal)"
      *ngFor="let animal of animais"
      [ngClass]="{'ativo': animal.selecionado}">
    <a>{{ animal.nome }}</a>
  </li>
</ul>

css:

.ativo{
//css equivalente a selecionado
}
1
  • Muito obrigado, a sua resposta funciona para mim. Commented 29/08/2019 às 20:49

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 .