问题描述: 在使用Angular的HttpClient进行带有参数的GET请求时,无法调用到Web API的相应方法。
解决方法:
下面是一个示例代码,展示了如何使用Angular的HttpClient进行带有参数的GET请求:
[HttpGet]
[Route("api/users")]
public IEnumerable GetUsers(string keyword, int page)
{
// 根据参数进行相应的处理
// 返回相应的结果
}
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
@Injectable()
export class UserService {
constructor(private http: HttpClient) { }
getUsers(keyword: string, page: number) {
// 构建请求参数
const params = new HttpParams()
.set('keyword', keyword)
.set('page', page.toString());
// 发起GET请求
return this.http.get('api/users', { params });
}
}
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
template: `
{{ user.name }}
`,
providers: [UserService]
})
export class UserComponent implements OnInit {
users: any[];
constructor(private userService: UserService) { }
ngOnInit() {
// 调用服务的方法,并获取返回结果
this.userService.getUsers('John', 1)
.subscribe(data => {
this.users = data;
});
}
}
在上述示例中,确保Web API的路由配置正确,并且Angular的HttpClient的get方法的参数与Web API的方法参数一致,就可以正常调用带有参数的GET请求。