web-dev-qa-db-ja.com

プロパティ ''はタイプ 'Object'に存在しません。観察可能なサブスクライブ

私は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" }
    ]
};

その後、サービスにインポートされ、「監視」される

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は、testDataArrayプロパティを含むObject型のオブジェクトを記録します。

2番目のconsole.logでは、コンパイル時にエラーが発生します。

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

オブジェクトの配列[Object、Object、..]を意図したとおりに記録します。

私は本当に理由を理解していません、私は何か間違ったことをしていると確信しています、私は説明が大好きです。

助けてくれてありがとう！

angulartypescriptrxjsobservable
15
0plus1

TypeScriptに伝えるとき：

WORKFLOW_DATA: Object

WORKFLOW_DATAは属性のないプレーンなオブジェクトであることを伝えています。後でWORKFLOW_DATA.testDataArrayにアクセスしようとすると、コンパイラはあなたが型を誤用していると考えます。

WORKFLOW_DATAの型チェックが必要な場合は、オブジェクトを記述するインターフェイスを作成する必要があります。

10
Mark Meyer

TypeScriptは、WORKFLOW_DATAがObjectであると想定しています。

.subscribe( WORKFLOW_DATA => {} )

あなたがそう言ったから：

  getWorkflowForEditor(): Observable<Object>

ただし、ObjectにはtestDataArrayプロパティがありません...データに任意のプロパティを含めることができることをTypeScriptに伝える必要があります。

  getWorkflowForEditor(): Observable<any>

または使用する

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

メソッドがObservable<Object>の場合の戻り値の型。したがって、サブスクライブすると、それが渡されるタイプになります。 testDataArrayタイプにはObjectがありません。いくつかのことができます：

  1. データを入力し、型を異なる方法で入力します

    WORKFLOW_DATA: { testDataArray: any } = []

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

  2. または、anyへの応答データをアサートするだけで入力します

    console.log( (<any>WORKFLOW_DATA).testDataArray );
5
Paul Samsotha