我想在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>
请帮忙。
答案 0 :(得分:5)
就是这样,你应该怎么写它:
[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}"
答案 1 :(得分:0)
大多数情况下的速记:
[style.animation-delay.s]="i"
或
[style.max-width.%]="propertyOnController"
为
@Component({...})
export class ControllerComponent {
propertyOnController: number;
答案 2 :(得分:0)
请注意,接受的答案已过期。我们不应该再使用NgStyle
(ref):
NgStyle指令可以用作直接[style]绑定的替代方法。但是,最好使用不带NgStyle的上述样式绑定语法,因为由于Angular中样式绑定的改进, NgStyle不再提供重要的价值,并且将来可能会被删除。
请改为使用直接样式绑定,如Ron Newcombs answer
中所述