如何使用ngFor索引递增[ngStyle]属性？

Question

我正在尝试使用ngFor动态创建多个元素，然后根据绘制的数量设置顶部属性。我想知道是否有一种方法可以在同一个div上访问ngFor的索引以进行ngStyle？例如：

```

```

如果不行，您有什么建议可以实现类似的效果？

我更喜欢避免添加另一个div，比如：

<div *ngFor="let d of data; let i = index;">
  <div class="testCase" [ngStyle]="{'top': mrTop*i}">{{d}}</div>
</div>

我想知道是否有一种方法可以将事件侦听器附加到循环事件上，以便在后台为绘制的每个div递增mrTop变量？（尽管这也行不通）

无论如何，我不确定最好的方法是什么，希望能得到一些帮助/建议。

此处为Plunk

- alexc

---

你试过了吗？我不明白为什么它不能工作。 - Günter Zöchbauer

@GünterZöchbauer 我试过了，但好像没有起作用。除非我漏掉了什么 - 我包含了一个示例 plunk 来演示测试用例。 - alexc

我错过了那个链接（如果它们没有被强调，我总是会这样）|-/ - Günter Zöchbauer

Answer 1

您的mrTop变量是一个字符串，无法进行乘法运算。

尝试使用以下代码：

public mrTop = 10;

然后

<div [ngStyle]="{'top': mrTop*i + '%'}">

或者

<div [style.top.%]="mrTop*i">

- Sasxa

Answer 2

有几个错误。

'10%' * i // not valid number

public mrTop: 10; // defines mrTop as of type 10 which doesn't make sense
// it should be public mrTop= 10;

Ng样式看起来可能像这样

[ngStyle]="{'top': mrTop * i + '%'}"

Plunker示例

- Günter Zöchbauer