带ngFor的Angular 2内联样式

Question

我正在尝试为div标签设置一个动态高度，如下所示：

<div class="summary"  *ngFor="let chart of chartCounts">
    <div class="bar" [style.height]="{{chart.CSSBarHeight}}">
        <div class="countLabel">{{chart.Count}}</div>
    </div>
    <div class="barlabel">{{chart.DaysLeft}}</div>
</div>

以这种方式做内联风格，我没有任何幸运的工作。它在控制台上抛出一个错误，指出：

Potentially unhandled rejection [3] Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{chart.CSSBarHeight}}] in function AppComponent(http) {@150:61 ("ary"  *ngFor="let chart of chartCounts">
                                        <div class="bar" [ERROR ->][style.height]="{{chart.CSSBarHeight}}">
                                            <div class="): function AppComponent(http) {@150:61 

有没有人知道我做错了什么，以及如何让这种风格在这种情况下工作？我在这里做的其他事情都很好用。我希望能够将它设置为百分比，这样在它完成渲染后，它就会变成如下所示：

<div class="bar" style="height:80%">

Answer 1

这太多了

[style.height]="{{chart.CSSBarHeight}}"

使用以下两种方法之一

style.height="{{chart.CSSBarHeight}}%"

或

[style.height]="chart.CSSBarHeight + '%'"

但两者不是同时存在的。

Answer 2

使用样式属性绑定，我们可以指定可选的单位，包括%。

(这在Template Syntax开发指南中有说明。)

<div class="bar" [style.height.%]="chart.CSSBarHeight">