“Le Type "Objet" n'est pas assignable à type de” avec de nouveaux HttpClient / HttpGetModule

Suivantes Officielle de Google Angulaire 4.3.2 doc ici, j'ai été capable de faire un simple get demande auprès d'un fichier json. Je voulais pratiquer frapper un véritable point de terminaison de JSON espace réservé du site, mais je vais avoir de la difficulté à décider quoi mettre dans la .subscribe() de l'opérateur. J'ai fait un IUser interface pour capturer les champs de la charge utile, mais la ligne avec .subscribe(data => {this.users = data}) envoyait le message d'erreur Type 'Object' is not assignable to type 'IUser[]'. Quelle est la bonne façon de gérer cela? Semble assez basique mais je suis un noob.

Mon code est ci-dessous:

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

}
Parce que les données n'a pas le type IUsers, essayez cette .subscribe((data: IUsers) => ... ou this.users = data as any;
Merci @cyrix . data as any a fait le tour de mon cas.

OriginalL'auteur midnightnoir | 2017-07-31

  1. 28

    En fait, vous avez quelques options ici, mais utiliser des génériques pour convertir le type que vous êtes enceinte.

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

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

    Aussi je vous recommande d'utiliser async tuyaux dans votre modèle auto s'abonner /se désabonner, surtout si vous n'avez pas besoin de fantaisie logique, et vous êtes tout simplement la cartographie de la valeur.

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

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

//template:
*ngFor="let user of users | async"
    merci à vous, le casting a très bien fonctionné!

    OriginalL'auteur Mark Pieszak - Trilon.io

  2. 14

    Je suis sur l'angle de la doc de l'équipe et un élément todo est de changer ces docs pour montrer les "meilleures pratiques" de façon à accéder à Http ... qui est par l'intermédiaire d'un service.

    Voici un exemple:

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

    Le composant ressemblerait alors à ceci:

    ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}
    Tout juste de commencer votre cours! Je vais refactoriser mon code dans les services à suivre les meilleures pratiques de!
    Super! Juste pour info ... le cours utilise actuellement l'ancien Service Http. Nous travaillons sur une mise à jour maintenant.
    Roger, je suis en train d'essayer de le comprendre, de mon propre chef comme un exercice 😛
    Petite question, quelle est la raison pour typcast url api après http.obtenir? Je l'ai essayé sans, et il renvoie toujours bon de données.
    Je l'ai remarqué aussi. Je suppose que c'est à cause de la fonction de type de retour que nous avons définie. Si nous enlevons également que, alors les données est tout Observables(objet). Il semble donc que nous pourrions aller avec le transtypage ou la méthode de type de retour. J'aime avoir les deux pour plus de clarté.

    OriginalL'auteur DeborahK