Question

我正在使用反应式表单来填充页面上的表单。当用户进行编辑并单击时。表单中的值将被获取并应用于网址。表单字段不是必需的，用户可以返回页面并根据需要进行更改。

我正在遍历每个表单控件，以查看它们的值是否虚假。如果值不是伪造的，我想获取选择输入的键和值对，并将其传递给我的router.navigate方法以填充URL。我在循环内的控制台中看到了想要的键和值对，但是我不知道如何将这些值保存到对象并将其传递到Router.navigate方法的循环外的我的queryParams对象中。相关代码如下。

为清楚起见，我不想使用原始的原始值或触摸的值进行检查，因为用户可以触摸表格并将其更改回默认值。另外，如果将router.navigate（）放入for循环中，则只会将最后一个键和值对添加到URL。

else语句中的console.log包含用户选择的项目。如何获取这些值并传递到router.navigate（）中的queryParms？

addExtraParameters() {
    for (var key in this.providerForm.controls) {
        this.x = this.providerForm.get(key).value
        if (!this.x || this.x === "null") {
           // this removes items that were not touched or edited
       } else {
           console.log(key, this.x);
       }
    }

    this.router.navigate([],
    { queryParams: {
        [key]: this.x // this doesn't work
        }, queryParamsHandling: 'merge'
    });
}

Answer 1

您的代码需要少量更改-查看更改注释

addExtraParameters() {
    var params = {}; //create new param object
    for (var key in this.providerForm.controls) {
        let x = this.providerForm.get(key).value;  //create local variable.
        if (!x || x === "null") {
           // this removes items that were not touched or edited
       } else {
           console.log(key, x);
           params[key] = x; //add new param key and value to existing params
       }
    }

    this.router.navigate([],
    { queryParams: params, queryParamsHandling: 'merge'
    });
}

如何在Angular 6中将对象传递给queryParams？

1 个答案: