Forms Angular 2：在ng2中使用FormBuilder和FormArray有没有简单的方法？ 处境

我正在制作一个表格，其中我想列出一些邮件，除了主题之外还有一个复选框，在其他复选框的同一列中还有一个“全选”复选框

表单看起来很简单，如下所示：

[ ] Check all
------------------------------------------
[ ] This is email subject #1
[ ] This is email subject #2
[ ] ...

• 当我选择

  Check all

  时，应选中以下所有复选框，当我再次单击时，应取消选中所有邮件
• 邮件通过

  @Input

  动态进入组件，列表可以在任何时间点更改

到目前为止很容易，没什么特别的。但是在ng2中使用FormBuilder来实现这一点似乎并不容易。旁注：我想使用FormBuilder来测试我的代码，减少端到端的测试，但更多的是单元测试

现行代码 模板 问题

• 我认为可能会出现竞争条件/计时问题：我迭代了

  @Input

  提供的

  邮件

  数组，但我在模板中将

  检查邮件列表

  手动连接到相应的索引。每当

  @Input

  发生变化时，我就会迭代所有

  邮件。我不知道Angular是否首先迭代模板中的所有
  邮件
  ，然后运行
  ngOnChange
  方法，反之亦然。有人能给我一个深刻的答案吗

---

表单是每个WebApp的基本组成部分。我做得对吗？任何帮助都将不胜感激。

如果您对输入进行了设置，并在那里重新填充表单控件，该怎么办？

<form [formGroup]="form">
  <div><input formControlName="toggleAll" type="checkbox"></div>

  <div>
    <ul formArrayName="checkMailList">
      <li *ngFor="let mail of mails; let i=index">
        <input type="checkbox" [formControlName]="i">
        <div>mail.subject</div>
      </li>
    </ul>
  </div>
</form>

@Component({ ... })
export class MailListComponent implements OnChanges {
  @Input() mails: Mail[];

  private get checkMailList(): FormArray { return this.form.get('checkMailList') as FormArray; }

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkMailList: this.fb.array([]);
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (!changes['mails'] || !changes['mails'].currentValue) {
      return;
    }

    // remove array first from form, as we will get 
    // mails again when anything updates
    if (this.checkMailList.length > 0) {
      this.form.removeControl('checkMailList');
      this.form.addControl('checkMailList', this.fb.array([]));
    }

    this.mails.forEach(m => {
      this.checkMailList.push(this.fb.control());
    });

    this.form
      .valueChanges
      .pluck('toggleAll')
      .distinctUntilChanged()
      .subscribe(selectAll => {
        if (selectAll) {
          this.checkMailList.setValue(this.mails.map(_ => true));
        } else {
          this.checkMailList.reset();
        }
      });
  }
}