javascript - ng样式 : Error saying "Missing expected }"

Question

我在解释时从 chrome 控制台收到以下错误

<div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}"></div>

Uncaught Error: Template parse errors: Parser Error: Missing expected } at column 17 in [{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}] in ng:///AppModule/HomeComponent.html@31:29 ("="width: 100%; height: 100%;">

什么应该导致错误？

Answer 1

与采用 CSS 样式的 style 属性不同，ngStyle 采用 javascript 对象(以字符串表示)。这就是为什么您必须将 100% 和 background-size 等其他属性用引号 '100%' 引起来，因为 % 和 - 字符在 javascript 属性名称/值中是非法的。

CSS

blah {
  attribute: value;
  attribute-dash: value;
}

对象

{
  attribute: value,
  'attribute-dash': value
}

因此，您需要将 ; 替换为 ,。

<div [ngStyle]="{'width': '100%', 'height': '100%', 'background-size': 'cover', 'background-repeat': 'no-repeat', 'border-radius': '0px'}"></div>

注意 ngStyle 应该在您尝试设置动态值时使用。它允许您将变量传递给样式以及使用 bool 值切换特定样式。如果你只是想设置内联样式，你应该使用普通的 style 属性。