angular - 在样式标签 Angular 2 中使用变量

Question

我想在 ngFor 循环中动态使用动画延迟。所以我使用 style="animation-delay:'i's;" 其中 i 是循环变量。这是行不通的。我的代码如下:

<div class="yourdiv" *ngFor = "let item of gvp.userMessages;let i = index" [attr.data-index]="i"
    style="animation-delay:'i's;">
                <div style="text-align:right;margin-right:10px">

                    <ion-icon  name="undo" class="rplymsg msgico"></ion-icon>
                    <ion-icon  name="trash" class="delmsg msgico" (click)="deleteMessage()"></ion-icon>

                </div>
                <div *ngFor = "let msg of item[1]" class="{{msg.substring(0,1) == 'R' ? 'receivedmsg left-top' : 'replymsg right-top' }}">
                {{msg.substring(2,msg.length)}}
                </div>               
    </div>

请帮忙。

Answer 1

就是这样，你应该这样写:

[ngStyle]="{'animation-delay.s': i}"

这是它的工作示例，请看一下:

WORKING DEMO

---

For more details please read :

https://angular.io/api/common/NgStyle

[ngStyle]="{'max-width.px': widthExp}"