Angular 5 多个逗号分隔的 HttpParams

Question

我有一组数据，用户可以按状态过滤数据。状态为已提交、未提交、已完成和失败。

为了过滤数据，我向后端 api 发送了一个 get 请求，看起来像这样。

/api/data/?status=uncommited,commmitted

上述调用只会带回未提交或已提交的数据。

我在执行此操作时遇到问题，因为网络选项卡显示我的请求，如下所示：

/api/data/?status=uncommited&status=commmitted

你能看到上面有两个“状态”而不是逗号分隔的 1。

data.service.ts

get(params = null) {

    let endpoint = "<removed>/api/v1/jobs"

    let filters = new HttpParams({fromObject: params});

    return this.apiService.get(endpoint, filters);

}

data.component.ts

this.filterForm = this.fb.group({
            status: [],

        });

       this.filterForm.valueChanges.subscribe((res) => {

            this.filters = _.pickBy(res, _.identity);

            let params = this.filters;

            this.dataService.get(params).subscribe((res) => {
                this.dataSource = res.data;
            });
        });

data.component.html

form fxLayout="row" [formGroup]="filterForm" fxLayoutAlign="space-between center" fxLayoutGap="10px" (change)="filter()">

            <mat-form-field>
                <mat-select placeholder="Status" formControlName="status" multiple>
                    <mat-option value="any">Any</mat-option>
                    <mat-option value="completed">Completed</mat-option>
                    <mat-option value="uncommitted">Uncommited</mat-option>
                    <mat-option value="committed">Commited</mat-option>

                    <mat-option value="failed">Failed</mat-option>

                </mat-select>
            </mat-form-field>

Answer 1

您应该使用%2C 来分隔status 参数上传递的多个值。然后是执行 URL 解码以获取参数列表的服务器端。 %2C 是 , 的 url 编码值

使用这种方法，Angular 会将其视为单个参数，并且您的调用会： /api/data/?status=uncommited%2Ccommmitted。

已编辑

let status = ['uncommited', 'commmitted']
let filters = new HttpParams();
filters = filters.append('status', status.join(', ');
// Append here as much params as needed
this.apiService.get(endpoint, { params: filters });