Question

我正在尝试使用ngFor动态创建多个元素，然后根据绘制的数量设置top属性。

我想知道是否有办法在ngStyle的同一div上访问ngFor的索引？即;

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

如果没有，有什么建议我可以实现类似的东西吗？

我宁愿避免添加另一个div，如;

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

（虽然这也不起作用）

我想知道是否有办法将事件监听器附加到循环事件，以便在幕后我可以为每个绘制的div增加mrTop变量？

无论如何，我不确定如何最好地接近这一点并希望得到一些帮助/建议。

Plunk here

Answer 1

您的public mrTop = 10;变量是一个字符串，您无法将其相乘。

尝试：

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

然后

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

或

$scope.treeOptions = {
            dropped: function (event) {
             //To catch the event after dragged

             //Value of model which is moving
             event.source.nodeScope.$modelValue;

             //Source Parent from where we are moving model
             event.source.nodeScope.$parentNodeScope.$modelValue;

             //Destination Parent to where we are moving model
             //Edit: Use "nodesScope" instead of "nodeScope" for dest object 
             event.dest.nodesScope.$nodeScope.$modelValue;
         }};

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 example

使用ngFor索引增加[ngStyle] attr？

2 个答案: