ngStyle：错误说“缺少预期}”

Question

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

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

未捕获的错误：模板解析错误：解析器错误：在 [{'width': '100%'; 中的第 17 列缺少预期的 }；'高度'：'100%'; “背景尺寸”：“封面”；'背景重复'：'不重复'; 'border-radius': '0px';}] in ng:///AppModule/HomeComponent.html@31:29 ("="width: 100%; height: 100%;">

什么应该导致错误？

Answer 1

与style采用 CSS 样式的属性不同，它采用ngStylejavascript 对象（以字符串表示）。这就是为什么你必须100%用引号括起来'100%'，以及其他属性，比如background-size因为%和-字符在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如果您尝试设置动态值，则应该使用它。它允许您将变量传递到样式以及使用布尔值切换特定样式。如果您只是想设置内联样式，则应该使用 normalstyle属性。