angular - HttpParams 不请求过滤的 JSON

Question

我有一个非常简单的 http 请求。

我的前端：

<button mat-button (click)="onSubmit()">Login</button>

我的提交（）：

onSubmit() {

this.personService.getPersonByName().subscribe(person => {
  console.log('Person', person);
});

我的人员服务 getPersonByName()：

  private personURL = 'http://localhost:3000/api/persons'

  constructor(private http: HttpClient) { }


  getPersonByName(): Observable<Person> {

     let params = new HttpParams().set('username', 'SwaX');

     return this.http.get<Person>(this.personURL, { params });
 }

我得到什么：

为什么我得到 3 个对象而不是 1 个？

Answer 1

也许你遗漏了一些小东西，那就是请求中的 HttpParams 将被映射到加入 URL。然后做

getPersonByName(): Observable<Person> {
   let params = new HttpParams().set('username', 'SwaX');
   return this.http.get<Person>(this.personURL, { params });
}

类似于做

getPersonByName(): Observable<Person> {
   return this.http.get<Person>(this.personURL + '?username=Swax');
}

这应该产生相同的结果。由于它是一个GET请求，因此您也可以使用浏览器对其进行测试。只需打开

http://localhost:3000/api/persons?username=Swax

在您的浏览器中，看看会发生什么。通过这种方式，您将能够确定问题是否来自您的 API。

Answer 2

这是您的 API 的问题，而不是 Angular 的问题。在通过网络发送回之前，您没有过滤掉您的响应。您可以在 API 端修复它并让它返回单个对象而不是对象数组，或者您可以使用 map 从服务的 getPersonByName() 方法中的响应中过滤对象 -

getPersonByName(username: string): Observable<Person> {
    return this.http.get<Person[]>(this.personURL)
        .pipe(
           .map(people => people.find(person => person.username === username)
        );
}

Answer 3

尝试：

return this.http.get<Person>(`${this.personURL}?username=SwaX`);

或者，

return this.http.get<Person>(`${this.personURL}/1`);

根据您的后端参数