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

带有ngFor的Angular 2内联样式

2 个答案: