ngStyle：错误提示“缺少预期的 }”答案

【问题标题】：ngStyle: Error saying "Missing expected }"ngStyle：错误提示“缺少预期的 }”
【发布时间】：2018-02-07 05:34:54
【问题描述】：

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

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

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

应该是什么导致错误？

【问题讨论】：

我猜对象文字中的; 应该是,
@GünterZöchbauer 这显然是我必须做的。谢谢。

标签： javascript html css angular typescript

【解决方案1】：

在较新的版本中，您还可以使用单位。

键是样式名称，带有可选的 .后缀（如'top.px'、'font-style.em'）。

喜欢

[ngStyle]="{'width.px':200, 'height.px':200}"

【讨论】：

【解决方案2】：

与采用 CSS 样式的 style 属性不同，ngStyle 采用 javascript 对象（以字符串表示）。这就是为什么您必须将 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 应该在您尝试设置动态值时使用。它允许您将变量传递给样式以及使用布尔值切换特定样式。如果你只是想设置内联样式，你应该使用普通的style 属性。

【讨论】：

感谢您的解释。现在我明白它是如何工作的了。