Typescript、HTMLの要素のスタイルを設定

Question

私の問題は、私は、HTML、タイプスクリプトの組み合わせがあります。

<ion-card class="ionCard" *ngFor="let item of libraries"> 
     <ion-card-header> 
     {{getLibraryName(item.locationName)}} 
     </ion-card-header>   
     <ion-card-content> 
      <label>{{item.occupiedSeats}} von {{item.freeSeats + item.occupiedSeats}}</label> 
     <div class="progressBar"> 
     <div class="progressBarFilled" style="width:50%"></div>  
     </div>         
     </ion-card-content> 
</ion-card> 

あなたは私が一定の幅を設定していclass= progressBarFilledでdivの中に見ることができるように。私は代わりにこの幅のダイナミックを設定したいと思います。だから私はwidth = {{item.occupiedSeats/item.freeSeats}}と言うことができます。

これはどういうことですか？

Answer 1

幅プロパティにバインドする次のいずれかの

<div class="progressBarFilled" [style.width]="(item.occupiedSeats/item.freeSeats) + '%'"></div> 

をそれとも、いつもの割合を使用する場合、あなたはそれに直接結合することができます。

<div class="progressBarFilled" [style.width.%]="(item.occupiedSeats/item.freeSeats)"></div> 

または値をバインドするNgStyle directiveを使用します：

<div class="progressBarFilled" [ng-style]="{'width': (item.occupiedSeats/item.freeSeats) + '%'}"></div>