时间戳

首页 > 解决方案 > 如何循环 Angular FormArray - 当前设置为循环中的最后一项

javascript - 如何循环 Angular FormArray - 当前设置为循环中的最后一项

问题描述

我正在尝试循环通过 FormArray 设置值。对javascript相当陌生。

下面TeamWorkingDate为 FormArray 中的 7 个 FormGroup 中的每一个设置为相同的日期Team，并设置为循环中的最后一个，日期 + 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

标签： javascriptangularclosures

解决方案

目前，formArray 中的所有 formGroups 都指向同一个 FormGroup 引用，因此在任何索引处更改值都会有效地更新同一个组。在 formArray 中创建并推送新的 FormGroup。

 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);
    }
  }

推荐阅读