角2中的圓形進度條

Question

我正在嘗試在角度2中創建一個百分比加載器。加載器應該加載給定百分比的數量，並且它應該是動態的。

HTML

<div class="col-lg-3 col-md-3 bar"> 
    <div class="c100 p50 small"> 
    <span>50%</span> 
    <div class="slice"> 
     <div class="bar"></div> 
     <div class="fill"></div> 
    </div> 
    </div> 
    <div class="textP"> 
    <h3>Statistic 1</h3> 
    </div> 
</div> 

我已經使用CSS的50％，創造了一個，但它不是動態的。當我改變百分比時，它只加載前一個值50％。我必須使用ngModel或其他任何東西。

Answer 1

假設你有一個組件圓形％的裝載機，你在你的父組件像包括

<circular-percent-loader [percent]="percent"></circular-percent-loader> 

這裏％的是爲您的孩子component.In子組件的輸入， 你可以藉此並設置這樣的百分比。我假設你從這個跨度中獲得了50％。

<div class="col-lg-3 col-md-3 bar"> 
       <div class="c100 p50 small"> 
        <span>{{percent}}</span> 
        <div class="slice"> 
         <div class="bar"></div> 
         <div class="fill"></div> 
        </div> 
       </div> 
       <div class="textP"> 
        <h3>Statistic 1</h3> 
       </div> 
      </div> 

在孩子component.ts

@Input() percent: number;