CSS：位置を使用してng-forループに要素を配置する方法： "fixed"

Question

<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要素の位置を固定し、それらの要素を上にして配置する必要があります。私は、これらの要素がドラッグされるために位置を固定することを要求するドラッグ指示を作成しています。どうすればこれを実現できますか？上記のコードは動作しません。

Answer 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> 

Answer 2

使用ngStyle

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

または

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