无法通过表单传递参数调用图书API获取数据的问题咨询

1. 服务层参数传递错误 #

你的getBooks方法声明接收两个独立参数，但组件调用时传了一个对象，同时方法内部错误使用了this.categor（实例变量）而非传入的参数，且未正确处理API的查询参数构建。

修正后的服务代码：

import { Books } from '../interfaces/books';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

constructor(private http: HttpClient) { }

// 改为接收对象参数，用HttpParams规范构建查询参数
getBooks(params: { categor: string, creation_date: string }): Observable<Books[]> {
  const queryParams = new HttpParams()
    .set('categor', params.categor)
    .set('creation_date', params.creation_date);

  return this.http.get<Books[]>('https://api.myapi.com/books', { params: queryParams }).pipe(
    tap(books => console.log(books))
  );
}

2. 组件调用参数不匹配+拼写错误 #

组件调用getBooks时传了对象，但原服务方法期望两个独立参数，同时存在拼写错误this.bookService（应为this.booksService）。

修正后的组件.ts代码：

import { Books } from './interfaces/books';
books: Books[] = [];

constructor(private booksService: BooksService){ }

onGetBooks(data: { categor: string, creation_date: string }) {
  this.booksService.getBooks(data).subscribe((response) => {
    console.log(response);
    // 根据API实际返回结构调整，若返回直接是数组则赋值response，若嵌套在list里则用response.list
    this.books = response;
  });
}

3. 接口定义错误 #

TypeScript中没有int类型，需改为number；另外API的categor参数标注为数组类型，接口需对应调整。

修正后的接口代码：

// 单个图书的接口
export interface Book {
    id: number;
    name: string;
    categor: string; // 若API支持多分类，改为string[]
    creation_date: string;
}

// 若API返回图书列表，可定义统一返回结构
export interface BooksResponse {
  list: Book[];
}

4. HTML表单优化 #

给按钮添加type="submit"，明确表单提交行为：

<form #bookForm="ngForm" (ngSubmit)="onGetBooks(bookForm.value)">
  <mat-form-field>
    <mat-label>分类</mat-label>
    <input matInput name="categor" ngModel>
  </mat-form-field>
  <mat-form-field>
    <mat-label>创建日期</mat-label>
    <input matInput name="creation_date" ngModel>
  </mat-form-field>

  <button mat-raised-button type="submit">获取图书</button>
</form>

额外说明 #

• 若API的categor需要接收多值数组，可通过queryParams.append('categor', 值)循环添加，或直接传入数组：new HttpParams({ fromObject: { categor: ['科幻', '历史'], creation_date: '2024-01-01' } })
• 使用HttpParams构建参数能自动处理URL编码，比字符串拼接更安全

内容的提问来源于stack exchange，提问作者Kareem