我想指定一个随机颜色的数组。它实际上首先工作,但后来我收到一条错误消息:“ExpressionChangedAfterItHasBeenChecked”我甚至看到它在消息传递之前的一秒钟,芯片的颜色变化非常快。所以它有些可行...我该如何解决这个问题。 (我还为芯片的创建添加了代码和函数)我知道我首先必须初始化它。但是我不知道如何实现这一点,所以如果你能直接在我的代码中编写它会很好。我一直在尝试很多东西,但没有任何效果。
HTML
<ion-chip [color]="color[getRandomInt(color.length)]" class="chip" #chip *ngFor="let tag of tagName">
TS
export class Tag {
color = ["ok", "nice","awesome","danger","white"];
colorSelected = null;
tag: string;
constructor(values: Object = {}) {
Object.assign(this, values);
}
ngAfterViewInit() {
this.colorSelected = this.color[this.getRandomInt(this.color.length)];
}
}
...
color: string [] = ["ok", "nice","awesome","danger","white"]
tagName: Tag[] = [];
...
add(): void {
let id = this.tagName.length + 1;
this.tagName.push(new Tag({ tag: "tag" + id }, ));
}
remove(tag: Tag) {
let id = this.tagName.indexOf(tag);
this.tagName.splice(id, 1);
}
getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
答案 0 :(得分:0)
您需要做的是确保只设置一次颜色,因此您需要将方法调用移出模板。相反,你应该这样做:
this.tagName = this.tagName.map((tag) => tag.color = this.color[this.getRandomInt(this.color.length)]);
然后在HTML中:
<ion-chip [color]="tag.color"
答案 1 :(得分:0)
如果您在console.log
方法中添加getRandomInt
,您会看到它被称为很多次,这是不好的。
相反,我建议您将颜色分配给对象一次,(您还需要将color
添加到Tag
课程中)
类似这样的事情
add(): void {
let id = this.tagName.length + 1;
this.tagName.push(new Tag({ tag: "tag" + id, color: this.color[this.getRandomInt(this.color.length)] }, ));
}
然后在html中它就像
<ion-chip [color]="tag.color" class="chip" #chip *ngFor="let tag of tagName">