Question

在我的离子应用程序中，我试图为每个列表项生成不同的颜色，因为我已经在我的comp.ts中编写了以下函数

getRandomColor() {
     var trans = '0.5'; // 50% transparency
     var color = 'rgba(';
     for (var i = 0; i < 3; i++) {
       color += Math.floor(Math.random() * 255) + ',';
      }
     color += trans + ')'; // add the transparency
      return color;
      }

在我的html文件中，我将其称为下面的

     <ion-content>
            <ion-list class="quoteList" *ngIf = "data" no-lines>
              <button ion-item *ngFor="let item of data" [ngStyle]="
                   {'backgroundColor': getRandomColor() }"
                          (click)="quoteSelected(item)">
                  {{ item.name }}
                 </button>  
             </ion-list>
     </ion-content>

但我收到以下错误，我需要更改以摆脱以下错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'backgroundColor: background-color:rgba(106,186,144,0.5)'. Current value: 'backgroundColor: background-color:rgba(200,98,210,0.5)'.
at viewDebugError (http://localhost:8100/build/vendor.js:10149:32)

Answer 1

这里发生的是，如果您不更改对象引用，而只更改其某些属性，则不会触发角度变化检测。

因此，您对背景颜色的更改仅在下一次更改检测运行中被识别，这不是您想要的。

在开发模式下，Angular实际上运行两次更改检测运行来捕获这样的错误。您看到的错误消息就是结果。

component.html

<ion-content>
  <ion-list class="quoteList" *ngIf = "data" no-lines>
    <button ion-item *ngFor="let item of data" [ngStyle]="getColor()" (click)="quoteSelected(item)">
       {{ item.name }}
    </button>  
  </ion-list>
</ion-content>

component.ts

getColor() {
  const color = this.getRandomColor();

  return {
    'background-color' : color
  }
}


getRandomColor() {
   // calc and return random rgba
}

Answer 2

如果您提前设置颜色，则应该避免该消息。类似的东西：

  colors=[];
  ...
  for (let i = 0; i < 2; i++) {
      this.colors.push(this.getRandomColor());
    }
  }

DEMO

改变环形角度4的背景颜色时出错

2 个答案: