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()
}