角度 2 中的圆形进度条 [英] Circular progress bar in angular 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>