角度 2 中的圆形进度条

中的圆形进度条

关注

发信

关注(28)粉丝(399)

本文介绍了角度 2 中的圆形进度条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML


<div class="c100 p50 small"><span>50%</span><div class="slice"><div class="bar"></div><div class="fill"></div>

<div class="textP"><h3>统计1</h3>

我已经创建了一个使用 CSS 的 50%，但它不是动态的.当我更改百分比时，它只加载前一个值 50%.我是否必须使用 ngModel 或其他任何东西.

解决方案

假设您有一个组件循环百分比加载器，您将其包含在父组件中，例如，

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

这里的百分比是子组件的输入.在子组件中，你可以取这个并像这样设置百分比.我假设你从这个跨度中取 50%.


<div class="c100 p50 small"><span>{{percent}}</span><div class="slice"><div class="bar"></div><div class="fill"></div>

<div class="textP"><h3>统计1</h3>

在子组件.ts中

@Input() 百分比:数字；

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>

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.

解决方案

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

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

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>

In child component.ts

@Input() percent: number;

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

07-30 23:38