将 JSON 对象数组转换为可观察<字符串[]>

Question

我是TypeScript和Angular 2的新手，今天已经环顾了一整天，但找不到与我想要实现的目标相关的任何内容。如果有人可以通过提供解决方案或指出正确的方向来提供帮助，将不胜感激。

我的代码库的结构是这样的：

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

">

src"下的"pages"文件夹具有每个UI的子文件夹，例如"员工"。在每个子文件夹中，我都有一个模板HTML文件(如employee-page.html)和相应的TypeScript文件(如employee-page.ts)。

"service"文件夹包含所有服务TypeScript文件(如employee-service.ts)，这些文件将从UI子文件夹(如src/pages/employee)中的TS文件中的TS文件调用/调用。这个XXXX-service.ts文件将根据用户的类型(演示或真实)，在演示用户的情况下从同一类发回虚拟数据，或者在真实用户的情况下调用REST API从服务器获取真实数据。

在employee-service.ts文件中，我有一个包含虚拟数据和相应函数的 JSON 对象，如下所示：

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'));
}
}

在我的员工页面.ts中，我调用员工服务.ts如下：

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

我面临的问题：

在我的员工服务.ts文件中，以下语句

return this.employeeData.employees;

在 "getEmployees()" 函数中给出一个错误(编译时错误)，如下所示：

[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...'.

但是，在相同的函数中，我的 REST API 从服务器返回相同的数据并且工作正常。我已经在我的 REST 服务中对其进行了硬编码以对其进行测试，并且它以这种方式工作。

我知道我必须转换"this.employeeData.employees"以满足"Observable<string[]>"返回类型。但是我不知道怎么做。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

试试这个：

首先为 employee 对象创建一个接口：

interface Employee {
employeeName: string;
employeeId: number;
employeeDept: string;
employeeExp: number;
}

现在像这样更改getEmployees(...)函数：

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