打字稿.FormGroup FormArray - 按值删除一个元素对象.Angular 2 4

Question

this.formGroup = this.formBuilder.group({
    images: this.fb.array([])
});

我以这种方式添加新元素: this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

get images(): FormArray {
    return <FormArray>this.formGroup.controls.images;
}

我的课程:

export class ImageCreateForm {
    id: number;
    constructor(id: number) {
        this.id = id;
    }
}

export class ImageResponse {
    id: number;
    url: string;
}

当我添加图像时,我的{{ formGroup.value | json }}是:

"images": [
   {
    "id": 501
   },
   {
    "id": 502
   },
   {
    "id": 503
   }
]

我想在发送表单POST请求之前删除之前的图像(例如只有图像id=502)formGroup.可能吗？我试过使用reset方法,但这删除所有元素: this.images.reset({"id":image.id});.image它在哪里是一个ImageResponse对象.

结果:{"images": [ null, null, null ]},但我想:

"images": [
   {
    "id": 501
   },
   {
    "id": 503
   }
]

Answer 1

FormArrayclass有removeAt哪个索引.如果您不知道索引,可以执行以下操作:

this.images.removeAt(this.images.value.findIndex(image => image.id === 502))

Answer 2

在 Angular Reactive Forms 中，formArray有一个方法叫做removeAt(). 您可以通过传递要删除的索引来使用它：

delete(index){
    this.array.removeAt(index)
}
``