web-dev-qa-db-fra.com

La propriété «» n'existe pas sur le type «Objet». Abonnement observable

Je viens de commencer avec Angular2 et j'ai un problème que je ne peux pas vraiment comprendre.

J'ai des données fictives créées en tant que telles:

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

Qui est ensuite importé dans un service et "observé"

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

}

J'ai alors un composant qui, dans le constructeur:

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

Le premier console.log enregistre un objet de type Object qui contient la propriété testDataArray.

Le deuxième console.log, entraîne une erreur au moment de la compilation:

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

Tout en enregistrant un tableau d'objets [Object, Object, ..] comme prévu.

Je ne comprends vraiment pas pourquoi, je suis sûr que je fais quelque chose de mal, j'aimerais une explication.

Merci pour toute aide!

angulartypescriptrxjsobservable
15
0plus1

Lorsque vous dites à TypeScript:

WORKFLOW_DATA: Object

Vous lui dites que WORKFLOW_DATA est un objet simple sans attribut. Lorsque vous essayez ultérieurement d'accéder à WORKFLOW_DATA.testDataArray le compilateur pense que vous abusez du type.

Si vous voulez vérifier le type sur WORKFLOW_DATA vous devez créer une interface qui décrit votre objet.

10
Mark Meyer

TypeScript attend WORKFLOW_DATA être Object ici:

.subscribe( WORKFLOW_DATA => {} )

parce que tu l'as dit:

  getWorkflowForEditor(): Observable<Object>

Mais Object n'a pas de propriété testDataArray ... Vous devez indiquer à TypeScript que les données peuvent avoir n'importe quelle propriété:

  getWorkflowForEditor(): Observable<any>

ou utiliser

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

Le type de retour si votre méthode est Observable<Object>. Ainsi, lorsque vous vous abonnerez, ce sera le type passé. Et il n'y a pas de testDataArray sur le type Object. Vous pouvez faire quelques choses:

  1. Saisissez les données et renvoyez le type différemment

    WORKFLOW_DATA: { testDataArray: any } = []

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

  2. Ou tapez simplement assert the data response to any

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