Как обновить индекс из массива cons тела {} Angular 8

Question

https://stackblitz.com/edit/angular-cuukb4

В этом коде

я получил значения имени, фамилии и навыков путем сопоставления. Мне нужно передать эти значения в body, итерация и отображение

  const body = {
      displayText: true,
      employee: [
        {

          firstName: this.employeeFirstName(0).value,
          lastName: this.employeeLastName(0).value,
         skills: [
            {
             skill: this.getEmployeeSkill(0,0),
             exp: this.getEmployeeExp(0,0)
            }
          ]
        }
      ]
    };

, но это дает мне значение только для 0-го сотрудника и 0-го навыка, как мне обновить индексы и отобразить их в моем console.log (body). Значение displayText не изменяется и остается одинаковым для каждой итерации

, поэтому на данный момент employeeFirstName, employeeLastName, getEmployeeSkill, getEmployeeExp получают меня, имя, имя сотрудника, навыки и данные опыта.

, но они только возвращают это для 0-го индекса

ожидаемый результат в постоянном теле ..

{
[
    {
          displayText: true,
          employee: [
            {

              firstName: 0th emp first name,
              lastName: 0th emp last name,
             skills: [
                {
                 skill: 0th employee 0th skill,
                 exp: 0th employee 0th exp
                },
                {
                 skill: 0th employee 1st skill,
                 exp: 0th employee 1st exp
                }
                .
                .
              ]
            }
          ]
        }
],
[
     {
          displayText: true,
          employee: [
            {

              firstName: 1st emp first name,
              lastName: 1st emp last name,
             skills: [
                {
                 skill: 1st employee 0th skill,
                 exp: 1st employee 0th exp
                },
                {
                 skill: 1st employee 1st skill,
                 exp: 1st employee 1st exp
                }
                .
                .
              ]
            }
          ]
        }
     ]
}

Answer 1

Структура, которую вы описываете, совпадает со структурой вашей формы. Поскольку это так, вы можете просто использовать значение employees FormArray.

Вместо этого вы хотите иметь возможность построить body, используя индексы массивов форм. Для этого вы можете использовать функцию массива map.

employees(): FormArray {
  return this.empForm.get("employees") as FormArray
}

onSubmit() {
  const formEmployees: [] = this.employees().value;
  const employee = formEmployees
    .map((_, i: number) => this.mapFormEmployee(i));
  const body = {
    displayText: true,
    employee: employee
  };

  console.log(body);
}

private mapFormEmployee(empIndex: number): {
  firstName: string;
  lastName: string;
  skills: { skill: string; exp: string; }[];
} {    
  const employeeFormGroup = this.employees().at(empIndex);

  return {
    firstName: employeeFormGroup.get('firstName').value,
    lastName: employeeFormGroup.get('lastName').value,
    skills: employeeFormGroup.get('skills').value.map((_, skillIndex) => 
      this.mapFormSkill(empIndex, skillIndex)
    )
  };
}

private mapFormSkill(empIndex: number, skillIndex: number): { skill: string; exp: string } {
  const employeeFormGroup = this.employees().at(empIndex);
  const skillFormGroup = (employeeFormGroup.get('skills') as FormArray).at(skillIndex);

  return {
    skill: skillFormGroup.get('skill').value,
    exp: skillFormGroup.get('exp').value
  };
}

Вы не вдавались в подробности о том, почему вам нужно сделать это таким образом, но это один из способов построения body используя индексы.

Было бы полезно, если бы вы указали причину, по которой вы хотите извлекать данные из формы таким образом, а не отображать напрямую из this.empForm.value.

Я отображаю данные неэффективно, поскольку я хотел сохранить функциональность, аналогичную той, которую вы делаете в данный момент.

https://stackblitz.com/edit/angular-rbd4mj