Question

我正在尝试通过导入一些数据来更新进度条。我对每条记录的导入延迟了一秒（可能不是最好的方法，但是这个功能不会经常使用，而且这种方法有效。）

我有导入工作，并将更新的％应用于变量，但视图未正确更新。

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

控制台输出this.completionPercent的更新百分比，但视图永远不会更新。

<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>

我错过了什么/做错了什么？

Answer 1

setTimeout(function () {

＆＃34;场所＆＃34; this

改为使用

setTimeout(() => {

另见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

而不是

myReader.onloadend = function (e) {

使用

myReader.onloadend = (e) => {

Angular4视图不使用setTimeout中的数据集进行更新

1 个答案: