webentwicklung-frage-antwort-db.com.de

Der Typ "Observable <Object>" kann nicht dem Typ "Observable <IUser []>" zugewiesen werden.

In meinem API-Dienst habe ich diese einfache getUsers-Funktion, um alle Benutzer der API zu holen.

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

Dies ist meine IUser-Schnittstelle, ich habe das Feld fürs erste optional gemacht.

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

und so habe ich den Dienst in meiner Komponente verwendet:

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

dies ist der Typfehler, den ich beim Kompilieren bekomme

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'.

Ich dachte, das könnte daran liegen, dass meine Antwort nicht mit der Oberfläche übereinstimmt, was ich noch einmal überprüft habe. Um sicher zu gehen, habe ich das Feld vorerst optional gemacht.

Ich weiß, dass ich das beheben kann, indem ich das Beobachtbare als beliebig wirke, aber besiegt das nicht den Sinn von TypScript?

Jede Hilfe, wo ich falsch liege, wäre großartig

Danke im Voraus

6
Sam Kelham

Es gibt zwei Möglichkeiten, dies zu tun, und es hängt davon ab, welche Version von RxJS/Angular Sie verwenden. Es gibt zwei Möglichkeiten, dies abhängig von Ihren Versionen zu tun:

// 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

Typisch, dass 5 Minuten nachdem ich poste, finde ich eine Lösung.

Der Trick bestand darin, die Funktion .get im Dienst genauso wie den Typ der Funktion getUsers wie folgt umzusetzen:

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

Hoffe, das hilft auch anderen Menschen

4
Sam Kelham

in meinem Fall hat das unten funktioniert

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

Ich verwende Angular 6

1
vnextcoder