尝试通过键访问值时，Typescript字典对象返回未定义的

Question

In my angular 7 app I'm trying to pass a dictionary object of type {[key : string] : string} from my service to my component.

When I console.log the object, the console successfully returns the dictionary: {image : blob:http//..., model: blob:http//...}

But when I try to access the image value like so: taskList['image'] it returns undefined ; which doesnt make any sense. Here's the code:

service:

public resolveTasks(callback : Function){
        forkJoin(...this.tasks).subscribe(async results => {
            let refMap : {[key: string] : string} = {};
            await results.forEach(async ref => {
                ref = await this.makeRequest("GET", ref);
                if(ref.type.includes('image')){
                    ref = URL.createObjectURL(ref); //create a url for the downloaded blob : blob:http://....
                    refMap['image'] = ref;
                } else {
                    const id = Math.floor(1000 + Math.random() * 9000); //add random number identifier
                    ref = URL.createObjectURL(this.blobToFile(ref, `model${id}.obj`))
                    refMap['model'] = ref
                }
            });
            callback(refMap); //{image:... , model: ....} loadContent is called here
            this.tasks = []; //empty the task list
        })
    }

component:

public ngOnInit() : void {
        //setup
        this.firebaseModel.resolveTasks(this.loadContent.bind(this));// pass loadContent as callback
    }

private loadContent(taskList : {[key:string] : string}) : void {
        console.log(taskList['image']) //trying to access blob by key, returns undefined
        const model : any = taskList['model'];
        const textureLoader = new THREE.TextureLoader(this.manager);
        const texture : string = textureLoader.load(taskList['image']);
        this.loadResources(model, texture, this.scene, this.renderer, this.container);
        this.animate();
    }

Answer 1

The issue was in my service :

This is the working code:

await Promise.all(results.map(async (ref) =>{
                ref = await this.makeRequest("GET", ref);
                if(ref.type.includes('image')){
                    ref = URL.createObjectURL(ref);
                    refMap['image'] = ref;
                } else {
                    const id = Math.floor(1000 + Math.random() * 9000); //add random number identifier
                    ref = URL.createObjectURL(this.blobToFile(ref, `model${id}.obj`))
                    refMap['model'] = ref
                }

            }));

The solution was found here, turns out that a forEach loop simply fires out multiple asynchronous calls instead of processing each get request sequentially; this post was very useful:

Using async/await with a forEach loop