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

Posted 2023-03-13

【中文标题】将 JSON 对象数组转换为 Observable<string[]>

【英文标题】：Converting a JSON Object Array to Observable<string[]>

【发布时间】：2017-08-15 10:22:54

【问题描述】：

我是 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”文件夹包含所有服务 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'));
    

在我的 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[]>”返回类型。但我无法弄清楚如何。

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

谢谢。

【问题讨论】：

顺便说一句：there's no such thing as a "JSON object".

【参考方案1】：

试试这个：

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

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
    
    //...

【讨论】：

成功了！非常感谢您的快速回复，非常感谢！现在需要弄清楚那个“接口”是什么以及它是如何工作的！ :D

很高兴为您提供帮助！在您的 employeeData 对象上，employees 属性是具有特定属性的对象数组。我们只是创建一个接口来帮助我们定义类型。更多接口详情：typescriptlang.org/docs/handbook/interfaces.html

啊……现在我想我明白了 Diullei。感谢您提供快速中肯的解释和链接，不胜感激。我当然需要更多地了解 TypeScript 作为语言。谢谢！