как динамически изменить значение шага прогресса

Question

В моем приложении angular есть индикатор выполнения шага. Я использовал json для динамического изменения значений. Я не мог найти способ изменить значение для индикатора выполнения шага. когда я использовал изменить значение, индикатор выполнения шага не работает должным образом. пожалуйста, помогите мне узнать способ

css код

@media (max-width: 576px) {
  .multi-steps-wrap {
    margin: 0;
  }
}
.multi-steps-wrap .multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.multi-steps-wrap .multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #3cba9f;
  font-size: 12px;
  z-index: 1;
}
.negative {
  border-color: red;
}
.multi-steps-wrap .multi-steps > li:before {
  content: "✓";
  display: block;
  margin: 0 auto 4px;
  background-color: #fff;
  width: 46px;
  height: 46px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-width: 2px;
  border-style: solid;
  border-color: #3cba9f;
  border-radius: 50%;
}
.multi-steps-wrap .multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: #3cba9f;
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: -1;
}
.multi-steps-wrap .multi-steps > li:last-child:after {
  display: none;
}
.multi-steps-wrap .multi-steps > li:last-child.is-active:before {
  content: "✓";
}
.multi-steps-wrap .multi-steps > li:first-child.is-active:before {
  content: "✓";
}
.multi-steps-wrap .multi-steps > li.is-active:before {
  background-color: #fff;
  border-color: #3cba9f;
}
.multi-steps-wrap .multi-steps > li.negative:before {
  background-color: red;
  border-color: red;

  color: white;
}
.multi-steps-wrap .multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps-wrap .multi-steps > li.is-active ~ li:before {
  background-color: #eee;
  border-color: #fff;
}

html код

<div class="product" *ngFor="let item of status;let i=index;">

          <div class="product-image">
            <img [src]="item.photo" >
          </div>
            <div class="product-title">{{item.name}}</div>
          <div class="product-price"><b>{{item.price}}</b></div>  
          <div class="product-quantity"><b>{{item.quantity}}</b></div>
          <div class="product-line-price"><b>{{item.price}}</b></div><br>
          <div>
            <div class="row multi-steps-wrap">
              <ul class="list-unstyled multi-steps">
                <li class="job-status job-created">processing</li>
                <li class="job-status job-inprogress is-active negative">Packed</li>
                <li class="job-status job-completed ">Shipped</li>
                <li class="job-status job-closed">Delivered</li>

              </ul>
            </div>
</div>

код ts

 loadData(){
    this.service.getOrderStatus().subscribe((data:any)=>{
      this.status=data
    })
  }

my json is

[   
    {   
        "name":"Pinpont Pen",
        "photo":"assets/img/products/pinpoint-ballpen.jpg",
        "quantity":2,
        "date":"02-02-2020",
        "price":100,
        "status":"packed"    
},
    {       
        "name":"Classmate Book",
        "photo":"assets/img/products/classmate-classmate-notebook-cmn018-original-imae6ajy4qhfxd3k.jpeg",
        "quantity":2,
        "date":"02-02-2020",
        "price":100,
        "status":"shipped"
    },
]

как поместить значение статуса в div прогресса. пожалуйста, помогите мне решить эту проблему

Answer 1

Вам необходимо добавить class динамически в зависимости от состояния предмета. Вы можете проверить это, изменив файл status в json.

<div class="row multi-steps-wrap">
    <ul class="list-unstyled multi-steps">
        <li class="job-status job-created"
            [ngClass]="{'job-inprogress is-active negative': item.status == 'processing'}">processing</li>
        <li class="job-status" [ngClass]="{'job-inprogress is-active negative': item.status == 'packed'}">Packed</li>
        <li class="job-status job-completed "
            [ngClass]="{'job-inprogress is-active negative': item.status == 'shipped'}">Shipped</li>
        <li class="job-status job-closed" [ngClass]="{'job-inprogress is-active negative': item.status == 'delivered'}">
            Delivered</li>
    </ul>
</div>

Это самый простой способ добиться этого.

Пожалуйста, проверьте обновленную скрипку Пример Stackblitz

Answer 2

Здесь вы можете использовать ngClass для динамического добавления класса в ваш элемент div.

<li class="job-status" [ngClass]="item.status === 'processing' ? 'job-created' : ''">processing</li>

, исходя из того, что вы можете использовать статус в div или любом элементе html.

Ссылка: https://stackblitz.com/edit/angular-ex8uk8