Angular removeAt总是从FormArray中删除最后一个元素

Question

我有以下表单。arr是FormBuilder的列表。

get arr() {
return this.form.get('arr') as FormArray;
}

this.form = this.fb.group({
id: this.fb.control(''),
name: this.fb.control('', Validators.required),
arr: this.fb.array([], Validators.minLength(1)),
});

public removeArr(idx: number) {
this.arr.removeAt(0);
}

正如您所看到的this.arr.removeAt(0)，我试图从列表中删除第一个arr，但它总是删除最后一个元素。甚至我把它改成了其他的东西，比如this.arr.removeAt(2)，它没有删除第三个元素，而是删除了最后一个元素。

如何删除idx给定的任何元素，而不是总是删除最后一个元素。

注意：

问题似乎与trackby函数有关。

<form *ngIf="form" [formGroup]="form">
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" required />
</mat-form-field>

<div
class="arr-row"
*ngFor="let control of arrControls; let i = index; trackBy: trackByIndex"
[formGroupName]="i"
>
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" required />
</mat-form-field>

<button mat-icon-button type="button" (click)="removeArr(i)">
<mat-icon>delete</mat-icon>
</button>
</div>

</form>
trackByIndex: TrackByFunction<FormControl> = (index, _) => index;

如果我将trackby功能更改为

trackByIndex: TrackByFunction<FormControl> = (index, v) => v.value.id;

然后它就工作了，但并不是所有的元素都有id，所以我不能在这里使用id。

Answer 1

尝试这个

public removeArr(idx: number) {
while (this.arr.length - 1 > idx) {
const center = this.arr.controls[idx+ 1].value;
this.arr.controls[idx+1].patchValue(this.arr.controls[idx].value);
this.arr.controls[idx].patchValue(center);
idx++;
}
this.arr.removeAt(subSpec.length - 1);
}