Javascript 更改动态颜色-表达式ChangedTerrithasBeenCheckedError:表达式在检查后已更改

我有一些类似于：

export class NestedTag {
  code: number;
  name: string;
  parent: number;
  children?: NestedTag[];  
}

我想以不同的颜色在圆圈中显示每个标记及其子标记

为此： 有一系列颜色：

colorTagsList= new Array<string>('#FFA200','#26BCC0','#475363','#6BB745','#0D7BAF');

我的HTML代码：

<div > 
            <span *ngFor="let tags of nestedRefTags; Last as lastTag" >{{lastTag}}
              <button class="tag" [ngStyle]="{'background-color': getColor()}">
                 <span > {{ tags.parent.name}}</span>
                 <span *ngIf="tags.children.length>0" > -</span>
                 <span *ngFor="let tag of tags.children ; last as isLast">
                  <span> {{tag.name}}</span>
                  <span *ngIf="!isLast">  |  </span>
                </span>
              </button>
            </span>
        </div> 

我该怎么办？

getColor（）

是一个函数，每次检测到更改时都会重新计算。每次更改

this.indexColor

的值时，此函数都会重新赋值并返回新颜色。在重新评估结束时，您将看到所有标签颜色相同

下面的解决方案删除

getColor（）

，并为每个标记分配一个颜色属性，然后用于设置颜色

colorTagsList=新数组(
“#FFA200”，
“#26BCC0”
...
);
nestedRefTags=[…].map（（item，i）=>（{…item，color:this.colorTagsList[i]}））；

在html中

{{lastTag}}
{{tags.parent.name}
-
{{tag.name}
| 

getColor（）

是一个函数，每次检测到更改时都会重新计算。每次更改

this.indexColor

的值时，此函数都会重新赋值并返回新颜色。在重新评估结束时，您将看到所有标签颜色相同

下面的解决方案删除

getColor（）

，并为每个标记分配一个颜色属性，然后用于设置颜色

colorTagsList=新数组(
“#FFA200”，
“#26BCC0”
...
);
nestedRefTags=[…].map（（item，i）=>（{…item，color:this.colorTagsList[i]}））；

在html中

{{lastTag}}
{{tags.parent.name}
-
{{tag.name}
| 

---

谢谢！！如果数组长度大于颜色数组长度，我希望颜色重复它们自己（我将重新开始）。最简单的方法是什么？更改行

].map（（item，i）=>（{…item，color:this.colorTagsList[i]}）到
].map（（项，i）=>（{…项，颜色：this.colorTagsList[i%this.colorTagsList.length]}）谢谢！！如果数组长度大于颜色数组长度，我希望颜色重复它们自己（我将重新开始）。最简单的方法是什么？更改行
].map（（item，i）=>（{…item，color:this.colorTagsList[i]}）到
].map（（项，i）=>（{…项，颜色：this.colorTagsList[i%this.colorTagsList.length]}）
<div > 
            <span *ngFor="let tags of nestedRefTags; Last as lastTag" >{{lastTag}}
              <button class="tag" [ngStyle]="{'background-color': getColor()}">
                 <span > {{ tags.parent.name}}</span>
                 <span *ngIf="tags.children.length>0" > -</span>
                 <span *ngFor="let tag of tags.children ; last as isLast">
                  <span> {{tag.name}}</span>
                  <span *ngIf="!isLast">  |  </span>
                </span>
              </button>
            </span>
        </div> 

core.js:6237 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '#FFA200'. Current value: '#0D7BAF'.
    at throwErrorIfNoChangesMode (core.js:8156)
    at bindingUpdated (core.js:20051)
    at pureFunction1Internal (core.js:36876)
    at Module.ɵɵpureFunction1 (core.js:36656)
    at ViewItemComponent_span_29_Template (view-item.component.html:45)
    at executeTemplate (core.js:12098)
    at refreshView (core.js:11945)
    at refreshDynamicEmbeddedViews (core.js:13335)
    at refreshView (core.js:11968)
    at refreshComponent (core.js:13410)