如何修复离子4和CSS中出现问题的进度条类？

Question

你好，我想做一个进度条，每次从ngFor列表中获取，为什么我要使用此CSS

.first{
height: 10px;
width: 100%;
background: #ddd;

}
.second{
height: 10px;
background: #009200;
}

这是我的HTML代码

 <div  *ngFor=" let rec of myComplain">


    <ion-list >

        <ion-item class="box">

          <h2><ion-row ><div class="tile"> Type : &nbsp; </div> {{rec.type}} </ion-row> </h2>
          <h2 ><ion-row> <div class="tile"> Description: &nbsp;</div>  {{rec.description}}</ion-row> </h2>
          <h2  *ngIf="rec.avancement === 'Pending Team leader validation'"><ion-row><div class="tile"> Progress : &nbsp;</div> In progress </ion-row></h2>
          <h2 *ngIf="rec.avancement != 'Pending Team leader validation'" ><ion-row><div class="tile"> Progress : &nbsp;</div>  {{rec.avancement}}</ion-row></h2>
          <h2><ion-row><div class="tile"> Project: &nbsp; </div>{{rec.nameProjet}}</ion-row> </h2>
          <h2><ion-row><div class="tile"> Created : &nbsp;</div> {{ rec.created_at }} </ion-row></h2>
          <h2><ion-row><div class="tile"> Progress: &nbsp;</div> {{ rec.progress }}% </ion-row></h2>
          <br>

          <div class="first">
            <div class="second" style.width="rec.progress%;"></div>
            </div>


      </ion-item>
      <hr>
    </ion-list>

  </div>

问题是我想以这种方式阅读rec.progress，但每次都无法正常工作任何人都知道我该怎么做吗？

Answer 1

语法为[style.width.%]="value"。

因此，您的情况：

<div class="second" [style.width.%]="rec.progress"></div>