如何通过Angular在HTTP参数中传递/删除数组参数

Question

我有一个状态对象数组。每个状态都有一个名称，默认情况下布尔值设置为false。

它表示带有过滤器的表单中的复选框，当复选框被选中时，bool设置为true：

const filters.statuses = [
{ 
name: "pending", 
value: false
}, 
{ 
name: "done", 
value: false
}, 
];

我使用Angular HTTP参数在URL处传递参数。

filters.statuses.forEach((status) => {
if (status.value) {
this.urlParams = this.urlParams.append('statuses[]', status.name);
}
});

检查状态时的Url参数如下所示：&状态%5B%5D=挂起

我的问题是当我想取消检查时。我知道HTTP参数是不可变的，所以，当复选框未选中时，我试图删除参数，所以设置为false：

...else {
this.urlParams = this.urlParams.delete('statuses');
}

但是，它不起作用，URL不会改变。如果我在那之后重新检查为true，URL看起来像：

&状态%5B%5D=挂起&状态%5B%5D=挂起

如果状态值为false，我如何删除params，并将其他状态保留在URL中？Angular 10项目。

谢谢你的帮助。

更新：它可以删除，我的参数名称不好：

else {
this.urlParams = this.urlParams.delete('statuses[]', status.name);
}

但是，我的另一个问题是，当我选中2个或更多复选框时，追加函数写在URL:&状态%5B%5D=挂起&状态%5B%5D=挂起&状态%5B%5D=完成

Answer 1

我准备了一个例子来回答你的问题(如果我理解正确的话(。

你可以更改复选框状态或URL来使用它。此外，我添加了助手按钮，它将引导你到不同的情况(通过更改URL(。

以下是示例：https://stackblitz.com/edit/angular-router-basic-example-cffkwu?file=app/views/home/home.component.ts

有一些部分。我们将讨论HomeComponent。

1. 您有ngFor，它显示状态，我使用ngModel处理状态(您可以选择任何您想要的(
2. 您订阅了activatedRoute.queryParamsobservable，这就是获取参数和设置复选框(复选框的模型(的方式
3. 您有ngModelChange处理程序，这就是根据复选框状态更改路由的方式

让我们关注2&3项。

第二个。根据路由查询参数呈现正确的状态。这是代码：

ngOnInit() {
this.sub = this.activatedRoute.queryParams.subscribe((params) => {
const statusesFromParams = params?.statuses || [];
this.statuses = this.statuses.map((status) => {
if (statusesFromParams.includes(status.name)) {
return {
name: status.name,
active: true,
};
}
return {
name: status.name,
active: false,
};
});
});
}

在这里，我解析statusesqueryParam并设置状态模型。我决定哪一个是活动的，哪一个不在这里。

第三个。您需要根据复选框状态更新URL。这是代码：

// HTML
<ng-container *ngFor="let status of statuses">
{{ status.name}} <input type="checkbox" [(ngModel)]="status.active" (ngModelChange)="onInputChange()" /> <br />
</ng-container>
// TypeScript
onInputChange() {
this.router.navigate(['./'], {
relativeTo: this.activatedRoute,
queryParams: {
statuses: this.statuses
.filter((status) => status.active)
.map((status) => status.name),
},
});
}

这里有ngModelChange处理程序。当选中/取消选中任何复选框时，将调用此处理程序。在处理程序中，我使用Router的navigate方法来更改URL。我收集实际的复选框状态，并为导航事件构建查询参数。

因此，现在您已经将复选框状态绑定到URL，反之亦然。希望这能有所帮助。