javascript - ngStyle: Error saying "Missing expected }" - Stack Overflow

admin管理员组

文章数量:1303411

I'm getting the following error from chrome console, when interpreting

<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%;">

What's supposed to cause the error?

I'm getting the following error from chrome console, when interpreting

<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%;">

What's supposed to cause the error?

• javascript
• html
• css
• angular
• typescript

Share Follow edited Aug 29, 2017 at 16:59 Soviut 91.7k5353 gold badges207207 silver badges282282 bronze badges asked Aug 29, 2017 at 16:57 user6039980user6039980 3,50688 gold badges3636 silver badges5959 bronze badges 2

• 1 I guess ; within the object literal should be instead , – Günter Zöchbauer Commented Aug 29, 2017 at 16:59
• 1 @GünterZöchbauer This was obviously what I had to do. Thanks. – user6039980 Commented Aug 29, 2017 at 17:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Unlike the style attribute which takes CSS styles, ngStyle takes a javascript object (represented in a string). That's why you have to wrap 100% in quotes '100%', as well as other attributes like background-size because % and - characters are illegal in javascript attribute names/values.

CSS

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

Object

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

Because of this, you need to replace the ; with ,.

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

NOTE: ngStyle is supposed to be used if you have dynamic values you're trying to set. It allows you to pass variables into the styles as well as toggle specific styles using booleans. If you're just trying to set inline styles, you should use the normal style attribute.

In newer version you can also use unit.

The key is a style name, with an optional . suffix (such as 'top.px', 'font-style.em').

Like

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

本文标签： javascriptngStyle Error saying quotMissing expected quotStack Overflow