尝试在 Angular 上记录反应式表单时收到 [object Object]

Question

我目前正在使用一个包含反应式表单的组件，表单中的每个字段都返回一个对象数组，并且每个字段的对象数组都是不同的。 这很重要，因为在填写表格时，我需要创建一个 URL 以便使用该数据调用 API。

我已经完成了 2 种生成 URL 的方法，但它们仅在输入是文本字段或该字段的数据是对象数组以外的另一种类型时才有效。 但是我所有的输入都是使用 PrimeNG 的多选，所以它们返回一个对象数组。 我展示了一个输入，但它们都是相似的。

组件.html

        <span>Field 1: </span>
        <span>
          <p-multiSelect
            [options]="options"
            defaultLabel="Placeholder"
            optionLabel="optionLabel"
            display="chip"
            formControlName="formControlName1"
          >
          </p-multiSelect>
        </span>

前面的代码返回这个：

formControlName1: Array(2)
  0: {foo: 'bar 1'}
  1: {foo: 'bar 2'}
length: 2 
[[Prototype]]: Array(0)

到目前为止，我尝试过的是这两种方法：

组件.ts

onSubmit(form: any) {
     const tree = this.router.createUrlTree([], { queryParams: form });
     console.log(this.serializer.serialize(tree));
  }

generateUrl() {
    for (const control in this.myForm.controls) {
      const val = this.myForm.controls[control].value;
      if (val !== null) {
        this.stringFinal += `${control}=${val}&`;
      }
    }
    console.log(this.stringFinal);
  }

这两种方法返回的结果基本相同，但正如我之前所说，它们在输入数据是文本而不是数组时起作用。

所以我的问题是，如何访问对象数组，并获取foo字段的每一个数据。

Answer 1

我设法使它工作：

generateUrl() {
    for (const control in this.myForm.controls) {
      const val = this.myForm.controls[control].value;
      if (val !== null) {
        val.forEach((element: any) => {
          this.stringFinal += `${control}=${element}&`;
        });
      }
    }
    console.log(this.stringFinal);
  }