Javascript 如何在ionic 3中实现进度条？

我使用了来自的ProgressBar组件，但得到的错误如下图所示：

如何解决此错误，请尽快回复

请参阅app.module.ts文件：

---

看起来您必须在app.module.ts文件中添加进度条

然后你只需要使用进度条

import { ProgressBarComponent } from '../components/progress-bar/progress-bar';

@NgModule({
  declarations: [  
    ProgressBarComponent
  ],

})
export class AppModule {}

这里是我为你更新的stackblitz。你可以用

home.html

  <progress-bar [progress]="loadProgress"></progress-bar>

home.ts

public loadProgress : number = 0;

  ngOnInit() {
    // Test interval to show the progress bar
    setInterval(() => {
      if (this.loadProgress < 100)
        this.loadProgress += 1;
      else
        clearInterval(this.loadProgress);
    }, 50);
  }

public loadProgress:number=0；
恩戈尼尼特（）{
//显示进度条的测试间隔
设置间隔（（）=>{
如果（此.loadProgress<100）
这是loadProgress+=1；
其他的
clearInterval（这是loadProgress）；
}, 50);
}

index.html文件

<style>
  .progress-outer {
    width: 96%;
    margin: 10px 2%;
    padding: 3px;
    text-align: center;
    background-color: #f4f4f4;
    border: 1px solid #dcdcdc;
    color: #fff;
    border-radius: 20px;
  }

  .progress-inner {
    min-width: 15%;
    white-space: nowrap;
    overflow: hidden;
    padding: 5px;
    border-radius: 20px;
    background-color: green;
  }
      </style>

.外部进展{
宽度：96%；
利润率：10px2%；
填充：3倍；
文本对齐：居中；
背景色：#F4；
边框：1px实心#DCDC；
颜色：#fff；
边界半径：20px；
}
.内部进展{
最小宽度：15%；
空白：nowrap；
溢出：隐藏；
填充物：5px；
边界半径：20px；
背景颜色：绿色；
}

您可以根据自己的选择更改此样式

这是输出截图，

---

我希望它能解决你的问题

看起来进度条组件没有注册到Angular。它的解决方案是什么？显示你的app.module.ts文件我不是Angular专家，但有很多潜在的原因：组件没有编译到包中，没有添加到你的

@NgModule

，等等。看起来这个组件的创建者刚刚按照教程创建了它；请尝试以下内容。@Karnan Muthukumar，请查看app.module.ts文件的第二个图像。非常感谢，它可以正常工作。我有一个问题，除了倒计时，我们如何使用您的代码来进行同样的操作？例如，从10%到0%。绿色条不会向下移动。你知道吗？也许CSS。。。