更改动态颜色 - ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改

Question

I have json like:

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

I want to display each tag and its children in a circle in a different color.

To do this: There is an array of colors:

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

Function for obtaining the current color:

getColor( ):string{
 if(this.colorTagsList[this.indexColor] ===undefined){
  this.indexColor=0;
 }
  return this.colorTagsList[this.indexColor++];
}

my HTML code:

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

But I get an error:

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)

What should I do?

Answer 1

getColor() is a function and will be reevaluated everytime a change is detected. Every time you change the value of this.indexColor this function is reeveluated and a new color returned. At the end of the reevaluation you will end up with all your tags having the same color.

Below solution removes the getColor() and assigns each tag a color property that is then used to set the color

 colorTagsList = new Array<string>(
    "#FFA200",
    "#26BCC0"
    ...
  );
  nestedRefTags = [ ... ].map((item, i) => ({...item, color: this.colorTagsList[i]}) );

and in the html

<div>
  <span *ngFor="let tags of nestedRefTags; last as lastTag"
    >{{lastTag}}
    <button class="tag" [ngStyle]="{'background-color': tags.color }">
      <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>

See this demo