添加可观察对象

Question

我刚刚开始使用Angular2而且我遇到了一个我无法理解的问题。

我有一些模拟数据：

export const WORKFLOW_DATA: Object =
{
    "testDataArray" : [
        { key: "1",              name: "Don Meow",   source: "cat1.png" },
        { key: "2", parent: "1", name: "Roquefort",    source: "cat2.png" },
        { key: "3", parent: "1", name: "Toulouse",   source: "cat3.png" },
        { key: "4", parent: "3", name: "Peppo", source: "cat4.png" },
        { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
        { key: "6", parent: "2", name: "Berlioz", source: "cat6.png" }
    ]
};

然后将其导入服务中并观察＆＃34;

import { Injectable } from '@angular/core';

import { WORKFLOW_DATA } from './../mock-data/workflow'
import {Observable} from "rxjs";

@Injectable()
export class ApiService {

  constructor() { }

  getWorkflowForEditor(): Observable<Object>
  {
      return Observable.of( WORKFLOW_DATA );
  }

}

然后我在构造函数中有一个组件：

constructor( private apiService: ApiService)
    {
        this.apiService.getWorkflowForEditor().subscribe( WORKFLOW_DATA => {
            console.log( WORKFLOW_DATA);
            console.log( WORKFLOW_DATA.testDataArray );
        } );
    }

第一个console.log记录一个Object类型的Object，它包含testDataArray属性。

第二个console.log，在编译时导致错误：

Property 'testDataArray' does not exist on type 'Object'.

仍然按预期记录对象数组[Object，Object，..]。

我真的不明白为什么，我确信我做错了什么，我很想解释。

感谢您的帮助！

Answer 1

Typescript期望WORKFLOW_DATA在这里Object：

.subscribe( WORKFLOW_DATA => {} )

因为你告诉过它：

  getWorkflowForEditor(): Observable<Object>

但是Object没有testDataArray属性......您应该告诉TypeScript数据可以具有任何属性：

  getWorkflowForEditor(): Observable<any>

或使用

console.log( WORKFLOW_DATA["testDataArray"] );

Answer 2

当你告诉打字稿时：

WORKFLOW_DATA: Object

您告诉它WORKFLOW_DATA是一个没有属性的普通对象。当您稍后尝试访问WORKFLOW_DATA.testDataArray时，编译器会认为您滥用了该类型。

如果要对WORKFLOW_DATA进行类型检查，则需要创建描述对象的界面。

Answer 3

如果您的方法为Observable<Object>，则返回类型。因此，当您订阅时，这将是传递的类型。 testDataArray类型上没有Object。你可以做几件事：

键入数据并以不同方式返回

WORKFLOW_DATA: { testDataArray: any } = []

getWorkflowForEditor(): Observable<{ testDataArray: any }>

或者只需键入将响应数据断言为any

console.log( (<any>WORKFLOW_DATA).testDataArray );

Answer 4

添加可观察对象

在您订阅的 service.ts 方法中。在 Observable 上，您可以引用类型对象或提及接受所有类型的条目

getResponse(query: string): Observable<any> {
    let data = {
      query: query,
      lang: "en",
      sessionId: "1234567",
    };
    return this.http.post(this.baseURL, data);
  }

财产＆＃39;＆＃39;类型＆＃39;对象＆＃39;上不存在。可观察的订阅

4 个答案:

添加可观察对象