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

时间:2017-10-27 02:45:34

标签: angular typescript ionic2

我想在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>

请帮忙。

3 个答案:

答案 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)

请注意,接受的答案已过期。我们不应该再使用NgStyleref):

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

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

中所述