Angular 2：在ng2中使用FormBuilder和FormArray有一种简单的方法吗？

Question

情况

我正在制作一个表格，我想列出一些邮件，其中包含主题旁边的复选框以及与其他复选框位于同一列中的“全部选中”复选框。

表单看起来像这样：

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

• 当我选择Check all时，应选择以下所有复选框，当我再次点击时，所有邮件都应取消选中。
• 邮件通过@Input动态进入组件，列表可以随时更改。

到目前为止这么容易，没什么特别的。但是在ng2中使用FormBuilder似乎并不那么容易。旁注：我想使用FormBuilder来测试我的代码，而不是端对端，而是使用单元测试。

当前代码

模板

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

问题

• 我认为可能会出现竞争条件/时间问题：我迭代mails提供的@Input数组，但我在模板中手动将checkMailList连接到相应的索引。每当mails更改时，我都会遍历所有@Input。我不知道Angular是否首先迭代模板中的所有mails，然后运行ngOnChange方法，反之亦然。谁能在这里给我一个合理的答案？

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