2016-04-01 8 views
4

Ich kann nicht herausfinden, wie JSON-Objekt-Array vom Web-Service zu korrekt getippten Objekt-Array in Angular 2-Anwendung.Angular 2 offizielles Beispiel: stark typisierte Json Objekt Array Mapping Bug

Wie Sie im offiziellen Beispiel von Angular 2 in Plunker sehen können, sind die erwarteten Objekte nicht vom Typ Hero, sondern vom Typ Objekt und den Helden: Hero [] Mitglied von HeroListComponent ist eigentlich ein Objekt []. Sie können in der Konsole sehen, dass das Array ist nicht stark typisiert:

http://plnkr.co/edit/Qa22yzPh3JWI8lNZ99Ik?p=preview

ich zusätzliche console.log hinzugefügt() aufrufen Helden Befehl hinzufügen, können Sie in Browser-Konsole sehen, dass wir nicht über einen Helden [] aber Objekt [].

hier also offenbar die Umwandlung nicht funktioniert:

this.http.get(this._heroesUrl) 
      .map(res => <Hero[]> res.json().data) 
      .catch(this.handleError); 

und wir bekommen Object [] statt Held [].

Irgendwelche Ideen darüber, wie JSON auf korrekt typisierte Objekte abgebildet wird?

Weitere Informationen: https://angular.io/docs/ts/latest/guide/server-communication.html

+3

kein Umwandlung ist. Es ist eine [type assertion] (https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md#4.16). Für mich ist diese Art der Behauptung eine schlechte Idee. Was du von .json() bekommst, ist in der Tat kein Array von Hero-Instanzen. Es spielt hier keine Rolle, denn Hero hat nur Felder. Aber wenn es Methoden hätte, würde das zum Beispiel nicht funktionieren. Held sollte eine Schnittstelle sein, keine Klasse, IMO. –

+0

Vielen Dank für Ihre Antwort! Ja, ich habe beobachtet, dass Methoden nicht funktionieren, wie Sie gesagt haben und diesen Thread gestartet haben :) Wenn Sie sagen, es sollte eine Schnittstelle sein .. Kennen Sie ein gutes Beispiel dafür? Der beste Weg, um Modellobjekte mit öffentlichen Methoden zu erhalten und sie mit json aus Web API zu bevölkern? Ich meine, gibt es keinen automatischen Mapper? Für verschachtelte Objekte ist es wirklich eine Belastung, eine manuelle Zuordnung vorzunehmen. Ich konnte einfach kein gutes Beispiel für diesen grundlegenden Fall interessant finden ... Um meine Objekte zu füllen, die von Typskript-Klassen mit json-Daten kommen, die von Web-API kommen. –

+0

Oder sollte ich die Schnittstelle an den Konstruktor eines anderen Objekts übergeben, der sich selbst initialisiert und öffentliche Methoden offenlegt, die ich aus Templates aufrufen muss? Vielleicht ist mein Ansatz hier falsch ... Danke! –

Antwort

3

Ihr Browser JavaScript ausgeführt wird, wahrscheinlich ES5, nicht Typoskript. In TypeScript kann dem Array eine Typdefinition zugewiesen werden, in einem Array ist das Array jedoch ein Array von Objekten. Sie können alles hineinlegen und es ist nicht getippt.

In ES6 gibt es typed arrays, aber sie sind eigentlich keine Arrays, sondern Objekte, die mit binären Daten umgehen.

Typoskript Notation (type assertion) wird nur für den Compiler zu überprüfen, daß das Objekt-Array verwendet wird, als ob es nur Hero Objekte enthalten sind, oder diejenigen kompatibel, und nicht mehr. Es wird in der Laufzeit nicht erzwungen und gibt keinen Code aus.

+0

Vielen Dank für die Antwort. Also, wenn ich eine benutzerdefinierte Funktion zur Heldenklasse hinzufüge (wie getNameSpecial()) und sie aus einer Vorlage heraus anrufe, funktioniert es momentan nicht, wenn dieser Held vom Webservice-Ergebnis gemappt wird ... (weil es Hero nicht ist, hat es eigentlich nicht Wie auch immer, es ist ein Objekt, wie du gesagt hast. Aber ist das nicht die Pflicht von TypeScript, dem Prototyp die richtigen Methoden hinzuzufügen und sich so zu benehmen, als würde eine Hero-Klasse mit definierten Member-Funktionen zu seinem Prototyp hinzugefügt? Ich erwarte immer noch die Methoden in Held typescript Klasse in dem Objekt von json zugeordnet ... Was denken Sie? Vielen Dank!!! –

+1

@Berbener Nein, TypeScript macht nichts Magisches. Es wäre Angulars Verantwortung, das zu regeln. Die Typ-Assertion sagt nur, dass das, was hereinkommt, gültige Objekte vom Typ "Helden" sein soll. Es ist möglicherweise nicht und es wird keine Fehlermeldungen aufgrund dessen geben. Nur wenn die Objekte verwendet werden und nicht über die Felder verfügen, die man erwarten würde. –

3

Angular 2 observable doesn't 'map' to model

Wie in obigem Link im doppelten Problem gesehen, Auto-Mapping auf Ihre eigenen Typoskript Klassen von JSON-Objekten ist noch ein manueller Prozess ....

Ich dachte wirklich, Typoskript klug wäre, genug, um so zu transponieren, dass ich das Hero-Objekt am Ende des map() -Aufrufs bekommen würde.

Es sollte ein einfacher Weg, um Held [] am Ende eines solchen Anrufs sein: .map (. Res => res.json() Daten)

Verwandte Themen