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://stackblitz.com/edit/angular-inline-style?file=app%2Fapp.component.html

有关详细信息，请阅读：

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（ref）：

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

请改为使用直接样式绑定，如Ron Newcombs answer

中所述

使用变量内部样式标签Angular 2

3 个答案: