web-dev-qa-db-fra.com

Le type 'Observable <Object>' n'est pas assignable au type 'Observable <IUser []>'

Dans mon service Api, j’ai cette simple fonction getUsers pour récupérer tous les utilisateurs de l’API.

public getUsers(url: string): Observable<IUser[]>  {
  return this._http.get(url);
}

Ceci est mon interface IUser, tout le champ est optionnel pour le moment.

export interface IUser {
  id?: string;
  first_name?: string;
  last_name?: string;
  location?: string;
  followers?: string;
  following?: string;
  checkins?: string;
  image?: string;
}

et voici comment j'ai utilisé le service dans mon composant:

export class SocialOverviewContainerComponent implements OnInit {
  public userData = [];
  public showForm = {};
  private _apiService: ApiService;

  constructor(apiService: ApiService) {
    this._apiService = apiService
  }

  public ngOnInit(): void {
    this.getUsersData();
  }

  public getUsersData()  {
    this._apiService.getUsers(ApiSettings.apiBasepath + 'users/')
      .subscribe(users => {
        this.userData = users;
    })
  }
}

et ceci est l'erreur de type que je reçois quand il compile

ERROR in src/app/services/api.service.ts(18,5): error TS2322: Type 'Observable<Object>' is not assignable to type 'Observable<IUser[]>'.
  Type 'Object' is not assignable to type 'IUser[]'.
    The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
      Property 'includes' is missing in type 'Object'.

Je pensais que c'était peut-être parce que ma réponse ne correspond pas à l'interface, ce que je vérifie et c'est le cas. Et j'ai aussi rendu le champ facultatif pour le moment.

Je sais que je peux résoudre ce problème en définissant l'observable comme n'importe lequel, mais cela n'empêche-t-il pas d'utiliser du textecript?

Toute aide sur où je vais mal serait géniale

Merci d'avance

javascriptangulartypescriptinterfaceobservable
6
Sam Kelham

Il existe deux façons de procéder. Cela dépend de la version de RxJS/Angular que vous utilisez. Voici les deux façons de le faire en fonction de vos versions:

// Using RxJS v4 / Angular v2-4. I assume that you're using the HttpModule...
import 'rxjs/add/operator/map';

public getUsers(url: string): Observable<IUser[]> {
  return this._http.get(url)
    .map((response: Response) => <IUser[]>response.json());
}


// Using RxJS v5 / Angular 5+ (at the moment). I assume that you're using the HttpClientModule, as the HttpModule was deprecated in Angular v4.
public getUsers(url: string): Observable<IUser[]> {
  return this._http.get<IUser[]>(url);
}

15
th3n3wguy

Typique, que 5 minutes après que je poste, je trouve une solution.

L'astuce consistait à convertir la fonction .get dans le service de la même façon que le type de la fonction getUsers ci-dessous:

public getUsers(url: string): Observable<IUser[]>  {
    return this._http.get<IUser[]>(url);
  }

J'espère que cela aide aussi les autres

4
Sam Kelham

dans mon cas, le ci-dessous a fonctionné

  getUsers(): Observable<User[]> {
      return <Observable<User[]>> this.http.get(this.pathAPI + 'user', super.header())
      .pipe(catchError(super.handleError));
   }

J'utilise Angular 6

1
vnextcoder