角度2中的圆形进度条 [英] Circular progress bar in angular 2

问题描述

我正在尝试在角度2中创建百分比加载器.加载器应加载给定百分比的量，并且它应该是动态的.

I am trying to create a percentage loader in angular 2. The Loader should load the amount of given percentage and it should be dynamic.

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还是其他任何东西.

I have created one by using CSS for 50% but it's not dynamic. When i change the percentage it loads only the previous value 50%. Do I have to use ngModel or anything.

推荐答案

假设您有一个组件round-percent-loader，它包含在父组件中，例如，

Suppose you have a component circular-percent-loader which you include in your parent component like ,

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

以下是您的子组件的输入.在子组件中，您可以采用这种方式并设置类似的百分比.我假设您从这一范围中获得50％.

Here percent is the input for your child component.In the child component, you can take this and set the percentage like this.I am supposing you take the 50% from this span.

<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中

In child component.ts

@Input() percent: number;

这篇关于角度2中的圆形进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！