我正在嘗試使用下面的示例為 div 背景分配隨機顏色隨機顏色但面臨以下錯誤：錯誤：ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。您可以簽入創建的控制臺stackblitz。我已經嘗試過以下答案：當組件屬性依賴于當前日期時間時，如何管理 Angular2“表達式在檢查后已更改”異常表達式___在檢查后發生了變化但沒有運氣！有人可以調查一下并提供幫助嗎？
1 回答
湖上湖
TA貢獻2003條經驗 獲得超2個贊
一種解決方案是使用指令。
所以我創建了一個名為 appRandomColor 的指令
這是它的代碼。
import {Directive, ElementRef, Input, OnInit} from '@angular/core';
@Directive({
? selector: '[appRandomColor]'
})
export class RandomColorDirective implements OnInit {
? constructor(private element: ElementRef) { }
? ngOnInit() {
? ? ? this.element.nativeElement.style.color = this.getRandomColor();
? }
? getRandomColor() {
? ? var color = Math.floor(0x1000000 * Math.random()).toString(16);
? ? return '#' + ('000000' + color).slice(-6);
? }
}
并將其添加到 AppModule 中的聲明中
然后我將它應用到 *ngFor 循環。并且沒有錯誤。
<ul>
? ? <li class="hero" *ngFor="let hero of heroes" appRandomColor>
? ? ? {{ hero }}
? ? </li>
</ul>
在 Component.ts 上
colorsArray?=?['#FF5733',?'#DA4323',?'#FFB1A0',?'#BB523C',?'#BB2505',?'#DE4922'];
在 Component.html 上
?<li?class="hero"?*ngFor="let?hero?of?heroes"?[appRandomColor]="colorsArray">
??????{{?hero?}}?</li>將預定義顏色數組添加到指令
@Input('appRandomColor')?colors:?string[];?
ngOnInit()?{?
??this.element.nativeElement.style.color?=?colors[Math.floor(Math.random()?*?colors.length)];?
}- 1 回答
- 0 關注
- 105 瀏覽
添加回答
舉報
0/150
提交
取消