Issue
How we can handle async methods in loops? I have a problem in an Angular program, I can't handle async methods. I want to wait for async methods. is there any way to wait for async methods in for loop.
Here is my code:
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>
output:
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
I want output like :
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
How can I do this?
Solution
We can do it by recursion
This worked for me:
ngOnInit() {
this.filePicked();
}
filePicked() {
this.msg = [];
this.msg.push("file picked");
const file: File = new File(["abcd"], "C:\Users\Arun Girivasan\Downloads\about.jpg");
this.customLoop(0, 10, file);
}
customLoop(index: number, limit: number, file: File) {
this.readFileUrl(file, (msg: string) => {
this.msg.push(msg);
this.msg.push(index.toString());
if (index < limit - 1) {
this.customLoop(++index, limit, file);
}
});
}
readFileUrl(file: File, callback: (msg: string) => any) {
const reader = new FileReader();
reader.onload = (function (f) {
return function (e) {
callback("file loaded successfully");
}
})(file);
reader.readAsDataURL(file);
}
Answered By - Arun Girivasan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.