Przyrost [ngStyle] attr za pomocą indeksu ngFor?

Question

Próbuję dynamicznie utworzyć kilka elementów za pomocą ngFor, a następnie ustawić najwyższy atrybut w zależności od narysowanej kwoty.

Zastanawiam się, czy istnieje sposób dostępu do indeksu ngFor na tym samym div dla ngStyle? to znaczy;

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

Jeśli nie, wszelkie sugestie jak mogę osiągnąć coś podobnego?

Wolałbym unikać dodawania kolejnego elementu div podobnego;

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

(Chociaż to nie działa albo)

Zastanawiam się, czy istnieje sposób, aby dołączyć detektor zdarzenia do zdarzenia pętli tak, że za kulisami mogę zwiększamy mrTop zmienną dla każdego div narysowany?

W każdym razie nie jestem pewien, jak najlepiej się do tego podejść i mając nadzieję na jakąś pomoc/poradę.

Plunk here

Answer 1

zmiennej mrTop jest ciągiem znaków, nie można pomnożyć.

Spróbuj:

public mrTop = 10; 

a następnie

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

lub

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

Answer 2

Istnieje kilka błędów

'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; 

styl Ng może wyglądać

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

Plunker example