Question

当值在*ngFor内部更改以通知用户时，我试图突出显示该值。到目前为止，我已经做到了以下步骤

https://stackblitz.com/edit/ngfor-zhywqy

ngFor由名为marks的json对象填充。当用户单击更新按钮时，将加载changedMarks，然后执行.find并使用已更改值的所有对象更新marks。我想做的就是将一种名为.updated的样式应用于更改后的值的li：

<ul *ngFor="let mark of marks;" >
   <li>{{ mark.type }}</li>
  <ul>
    <li *ngFor="let outcome of mark.Outcomes;  let i = index"> // add update style here if changed
      {{ outcome.name }} - {{ outcome.value }}
    </li>
  </ul>
</ul>

<button (click)="changeMarks()">Update</button>

Answer 1

在changedMarks函数中为newMark.selected = true设置属性。

然后在html [ngClass]="{'highlight': outcome.selected === true"中。其中Highlight是您的CSS类。

Answer 2

解决问题的一种方法是将ngFor trackBy与*ngFor一起使用。要了解ngFor trackBy，请观看YouTube上的以下视频：

Angular ngFor trackBy

然后，您可以使用样式绑定或类绑定将任何样式绑定到它。要了解样式/类绑定，请查看：

Angular官方文档=> Attribute, class & style binding

类绑定视频教程=> Class binding

样式绑定视频教程=> Style binding

在* ngFor

2 个答案: