webentwicklung-frage-antwort-db.com.de

Angular2. Ordnen Sie die http-Antwort einer konkreten Objektinstanz zu

Ein allgemeiner Ansatz, HTTP-Antwort zu verarbeiten, ist folgendermaßen:

return this._http.get(url)
           .map((res: Response) => res.json());

damit erhalten Sie einen Observable<Object[]>, bei dem Object dynamisch aus der Json-Deserialisierung erstellt wird. Dann können Sie dieses Ergebnis in *ngFor="let item of result | async" etc verwenden.

Ich möchte eine bestimmte Typinstanz abrufen (dh, mit dem Operator new den Konstruktor des Typs aufrufen). Es wurden verschiedene Möglichkeiten ausprobiert, um Folgendes zu erreichen:

.map((res: Response) => { let obj = res.json(); return new MyObject(obj.id, obj.name);})

aber diesen Fehler bekommen: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Dieser Weg scheint zu funktionieren, aber es ist viel zu kompliziert und wahrscheinlich nicht effektiv:

.map((res: Response) => {
    let results = <MyObject[]>[];
    let obj = res.json();
    obj.forEach(
        function (o: any) {
            results.Push(new MyObject(o.id, o.name));
        }
    );
    return results;
}

Vielen Dank!

5
rook

Wenn Sie wissen, welche Art von Objekten Sie aus dem JSON dekonstruieren möchten (was Sie wahrscheinlich tun), können Sie eine statische Methode erstellen, die eine Instanz aus Object zurückgibt.

class MyClass {

  prop: number;

  static fromObject(src: Object) {
    var obj = new MyClass();
    obj.prop = src.prop;
    return obj;
  }
}

Konvertieren Sie dann die JSON-Antwort in Instanzen von MyClass:

Rx.Observable.of('[{"prop":1},{"prop":2},{"prop":3}]')
  .map(val => JSON.parse(val))
  .exhaustMap(val => new Rx.Observable.from(val))
  .map(val => MyClass.fromObject(val))
  .subscribe(
    item => console.log('Next: ', item),
    error => console.log('Error:', error),
    _ => console.log('Completed')
  );

Wie das funktioniert:

  1. .map(val => JSON.parse(val)) Konvertiert die Antwort einfach in JSON, ein Array von Objekten.

  2. .exhaustMap(val => new Rx.Observable.from(val)) Wandelt jeden Wert in ein Observable um und exhaustMap glättet sie so, dass jedes Objekt von der JSON separat ausgegeben wird.

  3. .map(val => MyClass.fromObject(val)) Verwenden Sie map erneut, um jedes Objekt in eine Instanz von MyClass zu konvertieren.

Live-Demo anzeigen: http://jsfiddle.net/f5k9zdh1/1/

2
martin
.map((res: Response) => res.json().map(obj => new MyObject(obj.id, obj.name)))
2
lps540

Verwenden Sie diese Syntax, um sie in Ihr Objekt umzuwandeln:

 this.http.post(this.constants.taskUrl + parm, { headers: headers })
            .map((response: Response) => {
                var res = response.json();
                var result = <DataResponseObject>response.json();
                return result;
            })
0
John Baird