Как зациклить Angular FormArray - в настоящее время устанавливается как последний элемент в цикле

Question

Я пытаюсь зациклить значения настроек FormArray. Довольно новый для javascript.

Ниже TeamWorkingDate устанавливается одинаковая дата для каждой из 7 групп FormGray в Team FormArray и устанавливается последняя в цикле дата + 7 дней.

Я пробовал много вариантов forEach и ответов @ Закрытие JavaScript внутри циклов - простой практический пример , поскольку я считаю, что это должно быть какой-то проблемой закрытия.

Мое понимание замыканий ограничено, несмотря на чтение этого. В данном случае - это то, что setValue имеет доступ к переменной i вне вызова функции, и поэтому «видит» i = 7? Я думал let останавливает эту проблему?

  setDates(date: moment) {
    var arr = [];
    for(let i = 0; i < 7; i++) {
      let nextDate = date.clone().add(i, 'day');
      arr.push(nextDate);
      (<FormArray>this.myForm.get('Teams')).controls[i]
        .get('TeamWorkingDate').setValue(arr[i]);
    }
  }

Моя форма:

  ngOnInit() {
    this.myForm = this.fb.group({
      Teams: this.fb.array([])
    });
    const team = this.fb.group({
      TeamWorkingDate: '',
      ...
    })
    for (let i = 0; i < 7; i++) {
      (<FormArray>this.myForm.get('Teams')).push(team);
    }
  }

РЕДАКТИРОВАТЬ: изменено на let nextDate = date.clone().add(i, 'day'); вместо var

Answer 1

В настоящее время все formGroups в formArray указывают на одну и ту же ссылку FormGroup, поэтому изменение значения любого индекса будет эффективно обновлять одну и ту же группу.Создайте и вставьте новые FormGroups в formArray.

 ngOnInit() {
    this.myForm = this.fb.group({
      Teams: this.fb.array([])
    });
    for (let i = 0; i < 7; i++) {
      const team = this.fb.group({
      TeamWorkingDate: '',
        ...
      })
      (<FormArray>this.myForm.get('Teams')).push(team);
    }
  }