Question

我有一个关于如何将表达式传递给角度样式的问题，这就是我所拥有的：

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中使用表达式。

请求阅读和帮助！

Answer 1

您可以使用它：

[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 （点击刷新以获取每次随机颜色）

Angular将表达式传递给样式

1 个答案: