角5多逗号分离HttpParams

Question

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

为了过滤数据，我向后端api发送了一个get请求，该api如下所示。

/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编码值。

使用这种方法，角将作为单个参数来处理，您的调用将是：/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 });