1

Estou testando um método aqui, para adição de tags, quero uma de cada cor, porém, com o ngFor do Angular, as cores ficam todas iguais a cada nova tag acrescentada. Segue o código:

<div class="container">
 <input type="text" class="form-control" [(ngModel)]="select">
 <button type="button" (click)="addItem(select)
           (click)="setColor()">Enviar</button>
  <div *ngFor="let i of items" class="badge badge-pill">
    <div class="badge badge-pill" [ngStyle]="{'background-color' : 
                                                   randomcolor}">{{ i }}
  </div>
 </div>
</div>

select: string
items = []
randomcolor: any

addItem(item){
  this.items.push(item)
}

getRandomColor(){
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
   for (var i = 0; i < 6; i++){
     color += letters[Math.floor(Math.random() * 16)];
   }
 return color;
}


setColor(){
   this.randomcolor = this.getRandomColor()
}

1 Resposta 1

0

O motivo disso é porque randomcolor é global, e toda vez que você muda ela, você muda para todos, talvez seja melhor organizar os itens nesse formato:

{ 
   select : string,
   color : string
}

Só mudaria seu método addItem para algo assim:

addItem(item){
    this.items.push({ select : item, color : this.getRandomColor() });
}

Assim seu ngFor ficaria mais ou menos desta forma:

<div *ngFor="let i of items" class="badge badge-pill">
    <div class="badge badge-pill" [ngStyle]="{'background-color' : i.color}">
        {{ i.select }}
    </div>
</div>
1

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 .