如何在 ionic 3 中实现进度条？ [关闭]答案

【问题标题】：How to implement progress-bar in ionic 3? [closed]如何在 ionic 3 中实现进度条？ [关闭]
【发布时间】：2019-01-27 06:18:28
【问题描述】：

我使用了https://github.com/dnchia/ProgressBar-component 的 ProgressBar 组件，但出现如下图所示的错误：

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

查看 app.module.ts 文件：

【问题讨论】：

看起来进度条组件没有在 Angular 中注册。
它的解决方案是什么？
显示你的 app.module.ts 文件
我不是 Angular 专家，但有很多潜在的原因：组件没有被编译到包中，它没有被添加到你的 @NgModule 等等。看起来像这个组件的创建者只是按照教程来创建它；尝试跟随that tutorial。
@Karnan Muthukumar，请看 app.module.ts 文件的第二张图片。

标签： javascript html css typescript ionic3

【解决方案1】：

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

那么只有你必须使用那个进度条。

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

@NgModule({
  declarations: [  
    ProgressBarComponent
  ],

})
export class AppModule {}

我在这里为您更新了工作堆栈闪电战。你可以使用。

https://stackblitz.com/edit/ionic-progressbar-muthu-ewl6ag

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);
  }

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>

您可以随心所欲地更改此样式。

这是输出截图，

希望它能解决你的问题

【讨论】：

非常感谢，它有效。我有一个问题，我们如何使用你的代码来做同样的事情，但要倒计时？例如，从 10% 到 0%。绿条没有下降。你有什么主意吗？也许是 CSS...