打字稿，在html中设置元素的样式答案

【问题标题】：Typescript, Set Style of element in html打字稿，在html中设置元素的样式
【发布时间】：2018-04-10 11:41:16
【问题描述】：

我的问题是我有一个 HTML、Type Script 组合。

   <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}}。

这有可能吗？

【问题讨论】：

标签： html css typescript ionic-framework

【解决方案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>

【讨论】：