Javascript 为什么已经创建的元素继承了ngFor中新元素的样式？

我正在尝试添加一个新标签，但我希望它们更改其背景颜色。。我该怎么做

 <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>

它们保持相同的背景色。

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>

---

问题是您有一个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将在每个变化检测周期触发您的方法，因此颜色将始终变化，不是吗？还有，为什么要返回一个胖箭头函数而不是值本身呢？请检查此堆栈Blitz，当您单击按钮时，颜色也会发生变化。控制台上会显示ExpressionChangedTerithasBeenCheckedError。感谢提醒，我编辑了我的答案，我没有测试它，只是手工编写谢谢编辑。不过，它仍然不太管用。我认为这不是一个好的解决方案。还不起作用，他们仍然在改变颜色，并在控制台中显示错误。但是，我在这里解决了！谢谢你的帮助！

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;
}

<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>