在样式标签 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}"

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

工作演示

---

欲了解更多详情，请阅读：

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

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

Answer 2

大多数情况下的简写：

[style.animation-delay.s]="i"

或

[style.max-width.%]="propertyOnController"

为

@Component({...})
export class ControllerComponent {
    propertyOnController: number;

Answer 3

请注意

，接受的答案已经过时。我们不应该再使用NgStyle（参考）：

NgStyle 指令可用作直接 [样式] 绑定的替代方法。但是，最好使用上述不带 NgStyle 的样式绑定语法，因为由于 Angular 中样式绑定的改进，NgStyle 不再提供重要价值，并且最终可能会在将来被删除。

而是使用直接样式绑定，如 Ron Newcombs 答案中所述