angular 6 removeAt和trackBy更新formArray，但dom不正确

Question

我在formGroup中添加和删除formArray。我使用trackBy跟踪要删除的id。

好的索引传递给函数delete(i)，并删除表单中的好的formArray元素，但在dom中，最后一个元素每次都会消失。

我需要这个trackBy，否则，当我在input的内部写入时，我会失去焦点：-(.

我的代码简化了

我尝试删除时；过滤器，但我的对象是FormArray或AbstractControl[]

Answer 1

formArrayName必须在*ngFor之外，并且*ngFor超过get('contacts'(。控制

<div formArrayName="contacts" class="bloc-border bloc-color">
<div *ngFor="let item of siteForm.get('contacts').controls; 
let i = index; " [formGroupName]="i">
<div class="col-sm-12" style="display:flex;">
<input class="form-control" type="text" [formControlName]="'type'">
- {{i}}
<button  type="button"  (click)="deleteContact(i)">DELETE</button>
</div>
</div>
</div>

更新有时使用directy siteForm.get('contact'(.controls会给我们一个错误(我认为在某些版本的Anglar中，但我不确定(。为了避免这种情况，我们可以创建一个getter或返回一个formArray

get contacts():FormArray|null
{
return this.siteForm?this.siteForm.get('contacts') as FormArray:null
}

并使用

<div *ngFor="let item of contacts.controls;...> 

Answer 2

这是因为您使用的是trackBy Index。

使用：trackBy：trackElement

它解决了我的问题

Answer 3

尝试这个

deleteContact(position: any) {
const ctrl = this.siteForm.controls.contacts as FormArray;
while (ctrl.length - 1 > position) {
const center = ctrl.controls[position + 1].value;
ctrl.controls[position + 1].patchValue(ctrl.controls[position].value);
ctrl.controls[position].patchValue(center);
position ++;
}
ctrl.removeAt(ctrl.length - 1);

}