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

Posted 2023-03-06

【中文标题】如何将多个对象属性应用于 ngStyle

【英文标题】：How to apply multiple object property to ngStyle

【发布时间】：2022-01-10 02:11:56

【问题描述】：

我的 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 将其应用于元素。但这不能正常工作。我做错了什么？

【问题讨论】：

尝试 BLAH 或从您的退货声明中删除背景。因为您要复制背景两次。同样，您还应该从 return 中删除括号

【参考方案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' ....

【讨论】：

这不起作用。我收到此错误：键入'背景：字符串；颜色：字符串； | undefined' 不能分配给类型 ' [klass: string]: any; |空值'。类型 'undefined' 不能分配给类型 ' [klass: string]: any; |空'。

我刚刚编辑了我的答案。您的交换机中有“默认”情况吗？如果没有，请按照我在编辑代码中所做的那样添加它。并照顾新的“？”。我放入了 html 代码，以及“if (type)”

另外，请注意这个答案正确使用了 ngStyle。在 OP 中指定使用 ngClass 是不正确的，因为它需要一个 Record<cssClassName, booleanish> 对象。