Angular中下拉框筛选电视剧列表的GET请求错误问题

1. HTML表单控件绑定语法错误 #

你的select标签存在引号不匹配问题：formControlName=suitableOrNot" 开头缺少双引号，这会导致表单控件无法正确绑定到FormGroup，suitableOrNot的值可能无法正常传递到请求中。
修复后的代码：

<select class="form-select" formControlName="suitableOrNot">
    <option value={{costants.SUITABLE}}>{{costants.SUITABLE}}</option>
    <option value={{costants.UNSUITABLE}}>{{costants.UNSUITABLE}}</option>
</select>

2. URL拼接时多余的&符号 #

DAO代码中，当genre存在时，拼接后额外添加了一个多余的&：

url += genre ? "&genre=" + genre + '&' : '';

这会导致最终URL格式异常（比如...&genre=action&），末尾的&会让后端解析参数时识别到无效的空参数，直接引发请求错误。
修复后的拼接逻辑：

url += genre ? "&genre=" + genre : '';

3. 推荐优化：使用HttpParams构建请求参数 #

手动拼接URL参数容易出现格式、编码问题，建议改用Angular内置的HttpParams来构建参数，代码更健壮且不易出错：

import { HttpParams } from '@angular/common/http';

// ...

getUserTvSeries(userId:number, genre:string|null, suitableOrNot:string):Promise<TvSeries[]>{
    let params = new HttpParams()
        .set('userId', userId.toString())
        .set('suitableOrNot', suitableOrNot);
    
    if(genre){
        params = params.set('genre', genre);
    }

    const url = environment.backendUrl + '/lists-tv-series';
    console.log('Url:', url, 'Params:', params.toString());
    return lastValueFrom(this.httpClient.get<TvSeries[]>(url, { params }));
}

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