Angular ng样式

Question

我对 ngStyle 有疑问，我在其中根据悬停变量放置样式。它有效，但我一直看到警告

Type {color: string, background: string, 'border-color': string} | string is not assignable to type {[p: string]: string}

我的函数

getSuccessBtnStyleHover() {
        if (this.data && this.data.btnSBorderHColor && this.data.btnSBackgroundHColor && this.data.btnSTextHColor) {
            return {
                'color': this.data.btnSTextHColor,
                'background': this.data.btnSBackgroundHColor,
                'border-color': this.data.btnSBorderHColor,
            };
        }
        return '';
    }

我试过

[ngStyle]="(hovered && themeService.getSuccessBtnStyleHover()) || (!hovered && themeService.getSuccessBtnStyle())"
                       (mouseover)="hovered = true"
                       (mouseout)="hovered = false"

和

[ngStyle]="hovered ? themeService.getSuccessBtnStyleHover() : themeService.getSuccessBtnStyle()"
                       (mouseover)="hovered = true"
                       (mouseout)="hovered = false"

问题出在哪里？

感谢您的帮助

enter image description here

Answer 1

您return将空字符串作为默认条件。所以 return 类型要么是你的 CSS 对象，要么是一个空字符串。尝试 return {} 而不是 ''

Angular ng样式

Angular ngStyle

ng-style

angular