如何将多个对象属性应用于 ngStyle

Question

我的 HTML 中有这样一个元素： <span [ngStyle]="{'background': getColor(selectedOption.type)}">BLAH</span>

我的 TS 文件中有这样一个条件：

public getColor(type: string){

        switch (type) {
        case 'General':
            return {background: '#ffe5d7', color: '#e7560a' };
        case 'Interview':
            return { background: '#ffe5d7', color: '#e7560a' };
//more code

基本上，如果用户选择“常规”，我希望从函数返回正确的背景和字体颜色，并使用 ngStyle 将其应用于元素。但这不能正常工作。我做错了什么？

Answer 1

试试这个：

<span [ngStyle]="getColor(selectedOption?.type)">BLAH</span>

public getColor(type: string | undefined){

   if (type) {

      switch (type) {
        case 'General':
            return {background: '#ffe5d7', color: '#e7560a' };
        case 'Interview':
            return { background: '#ffe5d7', color: '#e7560a' };
        //more code

        case default:
            return {};
 
   }

return {};
}

编辑：我刚读到@Onur Baştürk 在我之前回答过。他是对的，你在复制 background 属性，一个在 HTML ([ngStyle]="{'background':...) 中，另一个在您的 ts 代码中：

return {background: '#ffe5d7', color: '#e7560a' ....

如何将多个对象属性应用于 ngStyle

How to apply multiple object property to ngStyle

ng-style

angular

如何将多个对象 属性 应用于 ngStyle

How to apply multiple object property to ngStyle

ng-style

angular

如何将多个对象属性应用于 ngStyle