So laden Sie mehrere Daten über service-und warten, bis es in Angular2

Ich benutze Ionic 2 bei Winkel 2 in meinem Projekt. In der root-Komponente können Sie auf eine Schaltfläche „Hinzufügen“ fügen Sie einen neuen Bericht über eine komplexe form und eine Menge von preprovided Daten (es gibt einige auswählt, werden gefüttert mit abgerufenen Daten aus der sqlite-Datenbank)
Jetzt, in meiner „CreateReportComponent“ ich habe den folgenden Konstruktor zum laden der Daten und weisen Sie auf lokale array-variable:

selectEmployeeOptions: Employee[];

constructor(private dbService: DatabaseService) {
  dbService.getAllEmployees().then(employees => {
      this.selectEmployeeOptions = employees;
  });

  //load more data like tasks etc.
});

Aber wenn ich ändern möchten, diese Daten in meine Komponente, das array ist leer. Ich habe versucht, es zu tun in ngOnInit() aber das scheint es zu sein, auch früh.

Möchte ich etwas wie dies, bevor die Komponente angezeigt bekommt:

  dbService.getAllEmployees().then(employees => {
      this.selectEmployeeOptions = employees;

      //modify data
      this.selectEmployeeTitleOptions = employees.map((item) => {
         return item.title;
      });
      console.log(JSON.stringify(this.selectEmployeeTitleOptions)) //--> empty
  });

Aber selectEmployeeTitleOptions leer ist…

Die Funktion in der databaseService sieht wie folgt aus:

getAllEmployees(): Promise<Emplyoee[]> {
  let query = "SELECT * FROM employees";
  let employeeList = [];
  this.database.executeSql(query, []).then((data) => {
     if(data.rows.length > 0) {
       let e = new Employee();
       e.id = data.rows.item(i).id;
       e.firstname = data.rows.item(i).firstname;
       e.lastname = data.rows.item(i).lastname;
       employeeList.push(e);
     }
  }, (error) => {
     //handle error
  });
  return Promise.resolve(employeeList);
}

Ich gelesen, dass es das Beheben Muster (https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html) Aber ich brauche, um mehrere Anrufe und nicht nur für die Kontakte, wie in dem Beispiel.

Also die Frage: Wie warten, mehrere Anrufe zur Datenbank?

InformationsquelleAutor GrübelDübel | 2017-02-02



3 Replies
  1. 1

    ich denke, dass etwas schief gehen hier

    getAllEmployees(): Promise<Emplyoee[]> {
      let query = "SELECT * FROM employees";
      let employeeList = [];
      this.database.executeSql(query, []).then((data) => {
         if(data.rows.length > 0) {
           let e = new Employee();
           e.id = data.rows.item(i).id;
           e.firstname = data.rows.item(i).firstname;
           e.lastname = data.rows.item(i).lastname;
           employeeList.push(e);
         }
      }, (error) => {
         //handle error
      });
      return Promise.resolve(employeeList);
    }

    ersten return Promise.resolve(employeeList); zurück leeres array ist, denn es ist asynchronen Prozess.
    müssen Sie eine Schleife durch die Daten.Zeilen, dann formatieren, Daten zurück wie diese.

    getAllEmployees(): Promise<Employee[]> {
      let query = "SELECT * FROM employees";
      return this.database.executeSql(query, []).then((data) => {
        let arr = [];
        for(let i = ; i < data.rows.length; ++i) {
          let emp = data.rows.item(i);
          let e = new Employee();
          e.id = emp.id;
          e.firstname = emp.firstname;
          e.lastname = emp.lastname;
          arr.push(e);
        }
        return arr;
      });
    }

    beachten Sie, dass .dann() Rückkehr ein promise-Objekt.

    • Danke. Ich habe versucht, bekomme aber eine Fehlermeldung: TypeError: Daten.Zeilen.Karte ist nicht eine Funktion
    • könnten Sie data.rows – Wert (log-Konsole)?
    • Sicher. Daten.Zeilen {„length“:3} in der Erwägung, dass Daten {„rows“:{„lang“:3},“rowsAffected“:0}
    • wie eine Schleife durch alle Zeilen
    • capture screen dann hochladen irgendwo
    • Der einzige Weg, um die array-Elemente, die man von meinem Beispiel. durch aufrufen von Daten.Zeilen.item(i)…

  2. 0

    Was Sie suchen, ist forkJoin Methode zurückgibt, die Beobachten, dass Sie wechseln sollten, anstelle der Verwendung Verspricht, Referenz darüber, warum sollten Sie dies tun, überprüfen Sie hier.

    Kurze Informationen über fork-join von seiner GitHub-Seite:

    Läuft alle beobachtbaren Sequenzen parallel und sammeln Ihre letzten Elemente.

    Diese Weise können Sie sicher stellen parallel Anfragen an das API.

    Weitere Informationen über forkJoin gehen hier.

    Zusätzlich sollten Sie den Aufruf von services mit ngOnInit wie Sie bereits erwähnt. Weitere Informationen zu Winkel-2-lifecycle-hooks finden Sie unter docs.

    • Ich werde versuchen zu gehen, mit der Antwort von @tiep-phan. Aber ich werde machen Sie von Ihrer letzten Beratung. Vielen Dank 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.