代码之家  ›  专栏  ›  技术社区  ›  corry

选择下拉菜单中的角度窗体合并数据

  •  1
  • corry  · 技术社区  · 6 年前

    如何将下拉菜单中的值合并到对象数组中? 有两个带有预填充值的下拉菜单(人员和国家) enter image description here

    因此,在将国家分配给个人时,我尝试获取对象数组中的数据,例如: [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}] 基于用户选择。

    我在试着 FormArray 但我做错了什么

    Stackblitz

    1 回复  |  直到 6 年前
        1
  •  0
  •   Muhammed Albarmavi    6 年前

    您需要根据人数数据向formArray添加一个formGroup,因此如果您有两个人,则必须创建两个formGroup

    this.selectForm = this.formBuilder.group({
      persons: this.formBuilder.array([
        this.formBuilder.group({
          'person': '',
          'country': ''
        }),
        this.formBuilder.group({
          'person': '',
          'country': ''
        })
      ])
    });
    

    或者把一个以人为基础的小组组织起来

    this.selectForm = this.formBuilder.group({
      persons: this.formBuilder.array(this.getFormGroupByN(this.personsData.length)
      )
    });
    
    
    getFormGroupByN(n: number) {
      let result = []
      for (let i = 0; i < n; i++) {
        result.push(this.formBuilder.group({
          'person': '',
          'country': ''
        })
        );
      } // for end 
    
      return result;
    }
    

    我已经创建了一个变量来保存人员数据 personsData 所以我可以循环抛出并创建option元素

    this.personsData = this.parts.map(part => part.persons).reduce((r, part, []) => r.concat(part));
    

    现在的结果是这样的

    [{"person":"John","country":"USA"},{"person":"Pablo","country":"Mexico"}]
    

    stackblitz demo