"Typ" Objekt "ist nicht zuordenbar Art" mit neuen HttpClient / HttpGetModule

Folgenden Google ' s offizielle Angular 4.3.2 doc hier, ich war in der Lage, einen einfachen get Anfrage von einem lokalen json-Datei. Ich wollte Praxis schlagen einen echten Endpunkt, von JSON-Platzhalter Seite, aber ich habe Schwierigkeiten, herauszufinden, was in dem .subscribe() Betreiber. Ich habe eine IUser - Schnittstelle zu erfassen, die Felder des payload, aber die Zeile mit .subscribe(data => {this.users = data}) den Fehler auslöst Type 'Object' is not assignable to type 'IUser[]'. Was ist der richtige Weg, dies zu behandeln? Scheint ziemlich einfach, aber ich bin ein noob.

Mein code ist unten:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IUsers } from './users';

@Component({
  selector: 'pm-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.css']
})
export class HttpComponent implements OnInit {
  productUrl = 'https://jsonplaceholder.typicode.com/users';
  users: IUsers[];
  constructor(private _http: HttpClient) { }

  ngOnInit(): void {    
    this._http.get(this.productUrl).subscribe(data => {this.users = data});
  }

}
Da die Daten nicht der Typ IUsers, versuchen Sie, diese .subscribe((data: IUsers) => ... oder this.users = data as any;
Danke @cyrix . data as any hat den trick in meinem Fall.

InformationsquelleAutor midnightnoir | 2017-07-31

  1. 26

    Die Sie tatsächlich haben ein paar Möglichkeiten hier, aber, dass Generika verwendet werden, um Sie zu wirken, der Typ, den Sie erwarten.

       http.get<IUsers[]>(this.productUrl).subscribe(data => ...

   //or in the subscribe
   .subscribe((data: IUsers[]) => ...

    Außerdem würde ich empfehlen die Verwendung von asynchronen Leitungen in Ihrer Vorlage, dass das automatische abonnieren /abbestellen, vor allem, wenn Sie brauchen keine Lust auf Logik, und du bist nur mapping-Wert.

    users: Observable<IUsers[]>; //different type now

this.users = this.http.get<IUsers[]>(this.productUrl);

//template:
*ngFor="let user of users | async"
    danke, Gießen hat Super geklappt!

    InformationsquelleAutor Mark Pieszak - Trilon.io

  2. 13

    Bin ich auf die Eckige doc-team und eine offene todo-Eintrag ist zu ändern diese docs zu zeigen, die "beste Praxis" - Wege auf Http ..., die durch einen service.

    Hier ist ein Beispiel:

    import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

import { IProduct } from './product';

@Injectable()
export class ProductService {
    private _productUrl = './api/products/products.json';

    constructor(private _http: HttpClient) { }

    getProducts(): Observable<IProduct[]> {
        return this._http.get<IProduct[]>(this._productUrl)
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
        //in a real world app, we may send the server to some remote logging infrastructure
        //instead of just logging it to the console
        let errorMessage = '';
        if (err.error instanceof Error) {
            //A client-side or network error occurred. Handle it accordingly.
            errorMessage = `An error occurred: ${err.error.message}`;
        } else {
            //The backend returned an unsuccessful response code.
            //The response body may contain clues as to what went wrong,
            errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
        }
        console.error(errorMessage);
        return Observable.throw(errorMessage);
    }
}

    Die Komponente würde dann so Aussehen:

    ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}
    Gerade angefangen, Ihren Kurs! Ich werde umgestalten meinen code in Dienstleistungen, die an bewährte Methoden zu halten!
    Super!!! Nur zur info ... der Kurs nutzt derzeit die alte Http-Dienst. Wir arbeiten an einem update jetzt.
    Roger, ich versuche, es herauszufinden, auf meine eigene, wie eine übung 😛
    Kurze Frage, was ist der Grund, typcast-api-url nach dem http.bekommen? Ich versuchte es ohne, und es immer noch gibt richtige Daten.
    Ich bemerkte dies auch. Ich nehme an, es ist, weil die Funktion zurück geben, die wir definiert haben. Wenn wir auch entfernen, dann werden die Daten nur Beobachtende(Objekt). So scheint es, dass wir gehen könnten, mit der entweder die Umwandlung oder den Rückgabetyp der Methode. Ich mag beide für Klarheit.

    InformationsquelleAutor DeborahK

Schreibe einen Kommentar