[英]Type 'Observable<Object>' is not assignable to type 'Observable<IUser[]>'
In my Api service I have this simple getUsers
function to fetch all of the users on the api.在我的 Api 服务中,我有这个简单的getUsers
函数来获取 api 上的所有用户。
public getUsers(url: string): Observable<IUser[]> {
return this._http.get(url);
}
This is my IUser interface, I have made all the field optional for now.这是我的 IUser 界面,我现在已将所有字段设为可选。
export interface IUser {
id?: string;
first_name?: string;
last_name?: string;
location?: string;
followers?: string;
following?: string;
checkins?: string;
image?: string;
}
and here is how I have used the service in my component:这是我在组件中使用该服务的方式:
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;
})
}
}
and this is is the Type error I get when it compiles这是我在编译时遇到的类型错误
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'.
I thought this might be because my response doesn't match the interface, which I have double check and it does.我认为这可能是因为我的响应与界面不匹配,我已经仔细检查过,确实如此。 And I have also made the field optional for now to make sure.我也暂时将该字段设为可选以确保。
I know I can fix this by casting the observable as any, but doesn't that defeat the point of using Typescript?我知道我可以通过将 observable 投射为 any 来解决这个问题,但这难道不会破坏使用 Typescript 的意义吗?
Any help on where I am going wrong would be great对我哪里出错的任何帮助都会很棒
Thanks in advance提前致谢
There are two ways to do this, and it depends on which version of RxJS / Angular that you are using.有两种方法可以做到这一点,这取决于您使用的是哪个版本的 RxJS / Angular。 Here are the two ways to do it depending on your 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); }
Typical, that 5 mins after I post, I find a solution.通常,在我发布后 5 分钟,我找到了解决方案。
Trick was to cast the .get
function in the service the same as the type on the getUsers
function as below:技巧是将服务中的.get
函数getUsers
为与getUsers
函数上的类型相同,如下所示:
public getUsers(url: string): Observable<IUser[]> {
return this._http.get<IUser[]>(url);
}
Hope this helps other people out as well希望这也能帮助其他人
in my case the below worked在我的情况下,下面的工作
getUsers(): Observable<User[]> {
return <Observable<User[]>> this.http.get(this.pathAPI + 'user', super.header())
.pipe(catchError(super.handleError));
}
I am using Angular 6我正在使用 Angular 6
In my case couple of param values is a number type.在我的情况下,几个参数值是数字类型。 I need to convert to string to solve the issue.我需要转换为字符串来解决这个问题。
const params = new HttpParams()
.set('someparam1', myNumberproperty1.toString())
.set('someparam2',myNumberproperty2.toString());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.