Angular2 FormArray 插入不会相应地更新视图

Question

所以我有一个包含 3 个控件的 FormGroups 的 FormArray。从视觉上看，它看起来像一个每行有 3 个输入的表格。这是它的外观：

我希望当用户按下 Tab 键或在行中的最后一个输入处输入时 - 在它之后添加一个新的空行。所以我添加(keydown)="addRow($event.keyCode, i)"到最后一个输入并创建了函数：

public addRow(keyCode, index)
{
    if (keyCode !== 9 && keyCode !== 13) {
        return;
    }

    let formItems = this.form.get('items') as FormArray;

    formItems.insert(
        index + 1,
        this.formBuilder.group({
            'start': ['', Validators.required],
            'title': ['', Validators.required],
            'category': [''],
        })
    );
}

推送 FormGroup 后，我可以在表单数组中正确看到控件，但是视图更新奇怪。例如，在第一行的最后一个输入上按 Tab 后，我得到以下结果：

最后一行被删除，我在第一行之后得到两个空行。我不知道为什么。这是推送后的 FormArray，那里的项目正常：

这是视图代码：

<div formArrayName="items">
    <div *ngFor="let item of form.controls.items.controls; let i=index" [formGroupName]="i" class="row item-index-{{ i }}">
        <div class="form-group">
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="Start" autocomplete="off" formControlName="start">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="Title" autocomplete="off" formControlName="title">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="Category" autocomplete="off" formControlName="category" (keydown)="addRow($event.keyCode, i)">
            </div>
            <div class="col-sm-2">
                <a class="btn btn-icon-only default">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <a class="btn btn-icon-only default">
                    <i class="fa fa-arrow-down"></i>
                </a>
                <a class="btn btn-icon-only red">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
    </div>
</div>

知道为什么会这样吗？

Answer 1

如果有人遇到此问题但原因不同，请检查您是否正确添加了控件：

let arr = new FormArray([]);
arr.push(....);               // Make sure you do this
arr.controls.push(....);      // And not this!

Answer 2

当我没有在 formarray 的末尾插入 formgroup 时，我曾经遇到过这个问题。由于某种原因，Angular 似乎在跟踪模板中的索引时遇到了困难，并通过使用trackBy解决了这个问题。所以尝试：

<div *ngFor="let item of form.get('items').controls; let i=index; trackBy:trackByFn" 
            [formGroupName]="i" class="row item-index-{{ i }}">

在 TS 中：

trackByFn(index: any, item: any) {
  return index;
}