我有一个关于如何将表达式传递给角度样式的问题,这就是我所拥有的:
color = '#';
letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0'];
this.color += this.letters[Math.floor(Math.random() * this.letters.length)];
HTML:
[style.background-color]="'expression'"
我想从字母中获取随机颜色并将其设置为背景。的console.log(this.color);从字母中返回一种颜色,但我不知道如何在html中使用表达式。
请求阅读和帮助!
答案 0 :(得分:2)
您可以使用它:
[ngStyle]="{'background-color': color}"
// or
[style.background-color]="color"
或者您可以创建一个函数并使用它,这将生成 每次调用时随机颜色
组件方:
getColor(){
return `#${this.letters[Math.floor(Math.random() * this.letters.length)]}`;
}
模板面:
[ngStyle]="{'background-color': getColor()}"
// or
[style.background-color]="getColor()"
WORKING DEMO (点击刷新以获取每次随机颜色)