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

Question

我在formGroup中添加和删除，formArray。我使用 trackBy.

跟踪要删除的 ID

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

我需要这个trackBy，否则，当我在input里面写的时候，我失去了焦点:-(。

my code simplified

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

Answer 1

formArrayName必须在*ngFor之外，*ngFor在get('contacts').controls之上

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

更新有时使用直接 siteForm.get('contact').controls，给我们一个错误（我认为在某些版本的 Anglar 中，但我不确定）。为了避免我们可以创建一个 getter thar return 一个 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 索引。

使用：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);

}

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

angular 6 removeAt and trackBy update formArray but not correctly dom

angular

formarray