如何在HTML元素属性值计算中使用ngFor索引变量？

Question

我是Angular的新手，我四处搜索，但找不到我的问题的答案。

我在我的类中定义了一个变量，并计划在模板中使用它。

public colors = ['red', 'green', 'blue', 'yellow'];

在模板中，我有以下代码：

<div *ngFor="let c of colors; index as i">
    <div [style.width]="'100px'" [style.height]="{{(i+1)*10}}px" [style.backgroundColor]="c">{{c}}</div>
</div>

我的意图是通过公式(i+1)*10px计算CSS高度。上部代码段中的语法不正确。实施它的正确方法是什么？

Answer 1

只需删除方括号[]。这是下面更新的一个

<div *ngFor="let c of colors; let i  =  index">
    <div  style.height="{{(i+1)*10}}px" [style.backgroundColor]="c">{{c}}</div>
</div>

看看StackBlitz

Answer 2

你需要这样的东西，

<div *ngFor="let c of colors; index as i">
    <div [style.width]="'100px'" [style.height]="(i+1)*10+'px'" [style.backgroundColor]="c">{{c}}</div>
</div>

STACKBLITZ DEMO

Answer 3

你可以使用[style.height.px]一个明确告诉单位的属性，所以在你的情况下它的px然后使用你的公式来计算数字：

<div *ngFor="let c of colors; index as i">
    <div [style.width]="'100px'" [style.backgroundColor]="c" [style.height.px]="((i+1)*10)">
      {{c}} {{i*10}}
    </div>
</div>

StackBlitz