javascript - Angular2 FormArray 插入不会相应地更新 View

所以我有一个包含 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 后，我可以在表单数组中正确看到控件，但是 View 更新奇怪。例如，在第一行的最后一个输入上按 Tab 后，我得到以下结果:



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



这是 View 代码:

<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>

知道为什么会这样吗？

最佳答案

我之前在 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;
}

关于javascript - Angular2 FormArray 插入不会相应地更新 View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45455978/