时间戳

首页 > 解决方案 > 如何等待'for loop next iteration'直到获得 FileReader.onload 结果

angular - 如何等待'for loop next iteration'直到获得 FileReader.onload 结果

问题描述

我们如何处理循环中的异步方法？我在 Angular 程序中遇到问题，我无法处理异步方法。我想等待异步方法。有什么方法可以在 for 循环中等待异步方法。

这是我的代码： 

msg: string[] = [];  

filePicked() {
    this.msg = [];
    this.msg.push("file picked");
    const file: File = new File([""], "C:\Users\Arun Girivasan\Downloads\about.jpg");

    for (var i = 0; i < 10; i++) {

        const reader = new FileReader();
        reader.onload = () {
        this.msg.push("file loaded successfully");
    }
    reader.readAsDataURL(file);


    this.msg.push(i.toString());
}

html: 

<div *ngFor="let m of msg">{{m}}</div>

输出： 

file picked  
0  
1  
2  
3  
4  
5  
6  
7  
8  
9  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully  
file loaded successfully

我想要像这样的输出：

file picked

file loaded successfully  
0  
file loaded successfully  
1  
file loaded successfully  
2  
file loaded successfully  
3  
file loaded successfully  
4  
file loaded successfully  
5  
file loaded successfully  
6  
file loaded successfully  
7  
file loaded successfully  
8  
file loaded successfully  
9

我怎样才能做到这一点？

标签： angulartypescriptfilereader

解决方案

您需要将文件读取器代码提取到另一个函数中并返回一个 Promise 或 Observable。

private readFile(file: File): Observable<string> {
    return new Observable(obs => {
      const reader = new FileReader();
      reader.onload = () => {
        obs.next(reader.result as string);
        obs.complete();
      }
      reader.readAsDataURL(file);
    });
}

我在https://stackblitz.com/edit/angular-pt3pbv上准备了一个带有 Observable 的快速示例

推荐阅读