Question

我是TypeScript和Angular 2的新手，今天整整都在环顾四周，却找不到与我想要达到的目标相关的任何内容。如果有人可以通过提供解决方案或指向正确的方向来帮助，我们将不胜感激。

我的代码库结构如下：

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

“src”下的

“pages”文件夹包含每个UI的子文件夹，如“employee”。在每个子文件夹中，我都有一个模板HTML文件（如employee-page.html）和相应的TypeScript文件（如employee-page.ts）。

“service”文件夹包含将从UI子文件夹（如src / pages / employee）中的TS文件中的TS文件调用/调用的所有服务TypeScript文件（如employee-service.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'));
    }
}

在我的 employee-page.ts 中，我正在调用employee-service.ts，如下所示：

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

我面临的问题：

在我的 employee-service.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
    }
    //...
}

将JSON对象数组转换为Observable <string []>

1 个答案: