我需要创建一个进度条来更新一些值。因此,我创建了一个组件。
百分比(儿童):
<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%时显示。