Почему уже созданные элементы наследуют стиль нового элемента на ngFor в Angular?
Я пытаюсь добавить новые теги, но хочу, чтобы они изменили свой фоновый цвет ... как я могу это сделать?
<input type = "text" class = "form-control" [(ngModel)] = "select">
<button type = "button" (click) = "addItem(select)"
(click) = "setColor()">Enviar</button>
<div *ngFor = "let i of items">
<div class = "badge badge-pill" [ngStyle] = "{'background-color' :
randomcolor}">{{ i }}
</div>
</div>
select: string
items = []
randomcolor: any
addItem(item){
this.items.push(item)
console.info(this.getRandomColor())
}
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()
}
Они остаются с теми же цветами фона.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
HTML:
<input type = "text" class = "form-control" [(ngModel)] = "select">
<button type = "button" (click) = "addItem(select)">Enviar</button>
<div *ngFor = "let i of items">
<div class = "badge badge-pill" [style.background] = "color[i]">
{{ i }}
</div>
</div>
TS:
select: string
items = []
color: any = {};
addItem(item) {
this.items.push(item);
this.color[item] = this.randomColor;
}
get randomColor() { return '#' + ('' + Math.random().toString(16).split('.')[1]).slice(-6); }
Отметьте этот stackblitz, stackblitz.com/edit/angular-iphnjb?file=app/app.component.ht мл Когда вы нажимаете кнопку, цвет меняется, также angular выдает "ExpressionChangedAfterItHasBeenCheckedError" на консоли.
Спасибо за внимание, я отредактировал свой ответ (не тестировал, только написал от руки)
Спасибо за редактирование. Однако это все еще не совсем работает. Не думаю, что это хорошее решение.
Пока не работает, все равно меняют цвета и выдают ошибку в консоли. Но я решил здесь! Спасибо за вашу помощь!
@VitorMarcolino, ваша проблема заключалась в одном атрибуте randomcolor, не так ли? Мой ответ тебе помог?
@BunyaminCoskuner Я наконец нашел время, чтобы проверить его, и еще раз отредактировал свой ответ. Спасибо за внимание (еще раз). Витор, рад за тебя! Не забудьте отметить проблему как решенную!
@BunyaminCoskuner да! Спасибо за вашу помощь. Решено!
Спасибо, @trichetriche .. Я ценю вашу помощь!
Проблема в том, что у вас есть один атрибут randomcolor, который используется всеми вашими товарами. Поэтому цвет фона может измениться, но все они будут иметь одинаковый цвет фона.
Попробуй это
select: string
items = []
addItem(item){
const color = this.getRandomColor();
this.items.push({value: item, bgColor: color});
}
getRandomColor(){
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++){
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
В HTML
<input type = "text" class = "form-control" [(ngModel)] = "select">
<button type = "button" (click) = "addItem(select)">Enviar</button>
<div *ngFor = "let item of items">
<div class = "badge badge-pill" [ngStyle] = "{'background-color' : item.bgColor}">{{ item.value }}
</div>
</div>
Angular будет запускать ваш метод при каждом цикле обнаружения изменений, поэтому цвета всегда будут меняться, не так ли? Также почему вы возвращаете функцию жирной стрелки вместо самого значения?