在 angular/Typescript 上获取 map 的值

Question

I'm trying to get the values of a map:

UtilisateursService.ts

 getIntervenants():Map<string,string> {
          let IdDisplayNameInt = new Map();

          firebase.database().ref("/users").orderByKey().once("value")
            .then(function(snapshot) 
                    {
                      snapshot.forEach(function(childSnapshot) 
                      {

                          IdDisplayNameInt.set(childSnapshot.val().UserId,childSnapshot.val().firstName + " " +childSnapshot.val().lastName);
                      }

                      )
                     }); 
          return IdDisplayNameInt;
          }

in new-cl-component.ts i have:

this.intervenantsList=this.userService.getIntervenants();
    console.log("this.intervenantsList = ",this.intervenantsList);

    console.log("this.intervenantsList.values =  ",this.intervenantsList.values());


    for (var valeur of intervenantsList.values()) {
      console.log("valeur = ",valeur);
        this.DisplayNameIntervenants.push(valeur)    }

        console.log("this.int = ",this.DisplayNameIntervenants)    ;

The map intervenantsList contains all the data that i need,

but when i try to display intervenantsList.values(), it's empty:

i tried with a basic map, and it works

let map = new Map();
        map.set("A",1);
        map.set("B",2);
        map.set("C",3);
        console.log("map = ",map);
        console.log("map.values= ",map.values());---- returns 1,2,3

Answer 1

getIntervenants() function is trying to return asynchronous data synchronously. IdDisplayNameInt variable is assigned asynchronously inside the function. You need return the value asynchronously as well. One way would be to use RxJS Subject . Try the following

Service

import { Observable, Subject } from 'rxjs';

getIntervenants(): Observable<Map<string,string>> {
  let result = new Subject<Map<string,string>>();

  firebase.database().ref("/users").orderByKey().once("value")
    .then((snapshot) => {
      let IdDisplayNameInt = new Map();
      snapshot.forEach((childSnapshot) => {
        IdDisplayNameInt.set(childSnapshot.val().UserId,childSnapshot.val().firstName + " " +childSnapshot.val().lastName);
      });
      result.next(IdDisplayNameInt);
    });

  return result.asObservable();
}

Then you need to subscribe to the getIntervenants() function in the component

this.userService.getIntervenants().subscribe(
  intervenants => { 
    this.intervenantsList = intervenants;
    console.log("this.intervenantsList = ", this.intervenantsList);
    console.log("this.intervenantsList.values =  ", this.intervenantsList.values());
    for (var valeur of intervenantsList.values()) {
      console.log("valeur = ",valeur);
      this.DisplayNameIntervenants.push(valeur);
    }
    console.log("this.int = ", this.DisplayNameIntervenants);
  }
);