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:
E aqui está o console com o retorno que obtenho:
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.