html - Angular 2中的圆形进度条

我正在尝试在angular 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或其他任何东西。

最佳答案

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

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

这里的百分比是您的子组件的输入。在子组件中，
您可以采用这种方式并设置这样的百分比。我假设您从这一范围中获得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;

关于html - Angular 2中的圆形进度条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44536406/