HttpParams不请求过滤的JSON

Question

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

我的前端：

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

我的onSubmit（）：

onSubmit() {

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

我的PersonService 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

这是您的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 2

尝试：

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

或

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

根据您的后端参数

Answer 3

也许您遗漏了一些小东西，这是因为请求中的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。