CSS：如何使用位置：“固定”在 ng-for 循环中定位元素答案

【问题标题】：CSS: How to position elements in ng-for loop using position : "fixed"CSS：如何使用位置：“固定”在 ng-for 循环中定位元素
【发布时间】：2016-07-11 17:18:30
【问题描述】：

    <ul class="nav nav-pills nav-stacked" style="list-style: none">
        <li *ngFor = "#el of dragZoneElems; #idx = index">
            <h4 style = "position: fixed; top : 'idx'* 10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
        </li>
    </ul>

我需要为 h4 元素固定位置，并且仍然从上到下排列它们。我正在创建一个拖动指令，该指令要求这些元素的位置固定才能被拖动。我怎样才能做到这一点。上面的代码不起作用。

【问题讨论】：

标签： css angularjs angular

【解决方案1】：

Relevant Demo

<ul class="nav nav-pills nav-stacked" style="list-style: none">
   <li *ngFor = "#el of dragZoneElems; #idx = index">
          <h4 [style.position]="'fixed'" [style.top.px]="idx*10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4>
   </li>
</ul>

【讨论】：

【解决方案2】：

使用ngStyle

<h4 [ngStyle]="{'position': 'fixed', 'top' : 'idx'* 10}" > ... </h4>

或

<h4 [style.position]="'fixed'" [style.top]="'idx'* 10" > ... </h4>

【讨论】：