変数を内部スタイルタグに使用する角度2

Question

ngForループ内でアニメーション遅延を動的に使用したいと考えています。だから私はループ変数ですstyle="animation-delay:'i's;"を使用しています。 これは機能しません。 私のコードは次のようなものです：

<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

それは、これはあなたが書くべき方法ですそれ：詳細について

https://stackblitz.com/edit/angular-inline-style?file=app%2Fapp.component.html

---

をお読みください：

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

ここ

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

はそれの実施例では、見てください。

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

Answer 2

変更

style="animation-delay:'i's;"

結合

style='{{"animation-delay:" + i + "s;"}}'

や使用スタイルに

ここ

[style.animation-delay]='i + "s;"'