I am currently working on updating a progress bar while importing data. To achieve this, I have implemented a delay of one second for each record during the import process. Although this may not be the most efficient method, it serves its purpose since this function will not be used frequently.
While the import functionality is functioning properly and correctly updating the percentage variable, I am facing an issue with the view not updating as expected.
export class AddQuestionComponent {
public completionPercent = 0;
public readThis(inputValue: any): void {
var file: File = inputValue.files[0];
var myReader: FileReader = new FileReader();
myReader.onloadend = function (e) {
// console.log(myReader.result);
let time = 1000;
let count = 1;
let data = JSON.parse(myReader.result);
for (let i = 0; i < data.length; i++) {
setTimeout(function () {
// do something here
count++;
this.completionPercent = Math.round(100 * i / data.length);
console.log(this.completionPercent);
}, time);
time += 1000;
}
};
myReader.readAsText(file);
}
Although the console displays the updated percentage value of this.completionPercent, the actual view does not reflect this change.
<div class="progress progress-sm mb-3">
<div class="progress-bar bg-info" role="progressbar" [ngStyle]="{ 'width': completionPercent + '%' }" aria-valuemin="0" aria-valuemax="100"></div>
</div>
What could I be missing or doing incorrectly in this scenario?