Typescript，设置html中元素的样式

我的问题是我有一个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>

{{getLibraryName（item.locationName）}
{{item.occupiedSeats}von{{item.freeSeats+item.occupiedSeats}

正如您在div中看到的那样，我正在设置一个固定的宽度。我想改为设置此宽度动态。所以我可以说

width={{item.occupiedSeats/item.freeSeats}

---

这有可能吗？

绑定到width属性：

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

或者，如果您始终希望使用百分比，则可以直接绑定到该百分比：

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

或使用绑定值：

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

---

绑定到宽度属性：

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

或者，如果您始终希望使用百分比，则可以直接绑定到该百分比：

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

或使用绑定值：

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