Konvertieren eines JSON-Objekt-Arrays in Observable <string[]>

Question

Ich bin neu in TypeScript und Angular 2, habe heute den ganzen Tag gesucht, konnte aber nichts in Bezug auf das, was ich erreichen möchte, finden. Würde mich freuen, wenn jemand helfen könnte, indem er eine Lösung gibt oder in die richtige Richtung weist.

Die Struktur meiner Codebasis ist wie:

-src 
-pages 
    -employee 
    -employee-page.html 
    -employee-page.ts 
-service 
    -employee-service.ts 

„Seiten“ Ordner unter „src“ hat Unterordner für jedes UI wie „Mitarbeiter“. Und in jedem dieser Unterordner habe ich eine Template-HTML-Datei (wie employee-page.html) und die entsprechende TypeScript-Datei (wie employee-page.ts).

Der Ordner "service" enthält alle Dienst-TypeScript-Dateien (wie employee-service.ts), die von den TS-Dateien aus der TS-Datei im UI-Unterordner (wie src/pages/employee) aufgerufen/aufgerufen werden. Diese XXXX-service.ts-Datei sendet, abhängig vom Typ des Benutzers (demo oder real), entweder die Dummy-Daten aus der gleichen Klasse im Fall eines Demo-Benutzers zurück oder ruft wiederum eine REST-API auf, um echte Daten zu erhalten Server im Falle eines echten Benutzers.

In den Mitarbeiter-service.ts Datei, habe ich ein JSON-Objekt mit Dummy-Daten und die entsprechende Funktion wie folgt:

employeeData = { 
    "employees": [ 
     { 
      "employeeName": "John Doe", 
      "employeeId": 123456, 
      "employeeDept": "Accounts", 
      "employeeExp": 8 
     }, 
     { 
      "employeeName": "John Smith", 
      "employeeId": 987654, 
      "employeeDept": "Travel", 
      "employeeExp": 12 
     } 
    ] 
}; 

getEmployees(userInfo): Observable<string[]> { 
    if(userInfo.name.toLowerCase() === 'demo_user') { 
     return this.employeeData.employees; 
    } 
    else { 
     return this.http.get(GET_EMPLOYEES_URL) 
      .map((res:Response) => res.json()) 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 
} 

In meinem Mitarbeiter-page.ts, ich rufe die Mitarbeiter-service.ts wie folgt:

loadEmployees() { 
    this.employeeService.getEmployees(userInfo) 
     .subscribe(
      (results) => { 
       this.employees = results; 
      }, 
      (error) => { 
       this.showError(error); 
      } 
     ); 
} 

Das Problem, das ich bin vor:

In meiner Mitarbeiter-service.ts Datei, die folgende Anweisung

return this.employeeData.employees; 

in dem "getEmployees()" Funktion gibt einen Fehler (Zeitfehler kompiliert) wie folgt:

[ts] 
Type '{ "employeeName": string; "employeeId": number; "employeeDept":  
string; "employeeExp": number...' is not assignable to type 
Observable<string[]>'. 
Property '_isScalar' is missing in type '{ "employeeName": string; 
"employeeId": number; "employeeDept": string; "employeeExp": number...'. 

In derselben Funktion gibt meine REST-API dieselben Daten vom Server zurück und funktioniert einwandfrei. Ich habe es in meinem REST-Service festgeschrieben, um es zu testen, und es funktioniert auf diese Weise.

Ich weiß, ich muss "this.employeeData.employees" konvertieren, um "Observable<string[]>" Rückgabetyp zu erfüllen. Aber ich bin nicht imstande herauszufinden, wie.

Kann mir bitte jemand helfen, das herauszufinden?

Danke.

Answer 1

Try this:

zunächst eine Schnittstelle für den Mitarbeiter-Objekt erstellen:

function getEmployees(userInfo: any): Observable<Employee[]> { // <-- changed 
    if(userInfo.name.toLowerCase() === 'demo_user') { 
     return Observable.of(employeeData.employees); // <-- changed 
    } 
    //... 
}