我想创建一个进度条,但是百分比显示不正确

时间:2018-11-21 09:51:08

标签: angular bootstrap-4 angular6 ng-bootstrap

我需要创建一个进度条来更新一些值。因此,我创建了一个组件。

百分比(儿童):

<div class="row">
    <div class="col-md-12">
        <p>This progress bar uses the customized default values, but changes the type using an input.</p>
        <p><ngb-progressbar type="warning" [value]="currentValuePercentage" [striped]="true" [animated]="true" #bar><i>{{currentValuePercentage}}%</i></ngb-progressbar></p>
    </div>
  </div>

.ts:

currentValuePercentage: number = 0;
  constructor() { }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    if (changes && changes.currentPercentageIncrement) {
      this.currentValuePercentage = this.currentValuePercentage+Number(changes.currentPercentageIncrement);

    }

  }

FATHER HTML组件:

<app-percentage #display_percentage></app-percentage>

父亲.js:

@ViewChild('display_percentage') display_percentage;
//This is called when my father do some operation and so I need to update percentge
this.display_percentage.ngOnChanges({currentPercentageIncrement:(100/this.listMovimenti.length)});

问题是百分比以正确的方式增加,但是进度条没有以正确的方式更新。详细来说,进度条不会更新,而是以0%开头,并且仅在百分比为100%时显示。

0 个答案:

没有答案