angular - 如何在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; index as i">
    <div [style.width]="'100px'" [style.height]="(i+1)*10+'px'" [style.backgroundColor]="c">{{c}}</div>
</div>

STACKBLITZ DEMO