Question

在解释

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

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

未捕获错误：模板解析错误：解析器错误：缺少预期在[{'width'：'100％'的第17列; '身高'：'100％'; 'background-size'：'cover'; 'background-repeat'：'不重复'; 'border-radius'：'0px';}]在ng：///AppModule/HomeComponent.html@31：29 （“=”宽度：100％;高度：100％;“＆gt;

应该导致错误的原因是什么？

Answer 1

与采用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属性。

Answer 2

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

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

喜欢

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

ngStyle：错误说“Missing expected}”

2 个答案: