还需要显示以前的字段部分的删除按钮

Question

在此处，如果我单击“添加”按钮删除按钮显示了最后一个字段。需要显示所有各个字段部分的删除按钮。

这是JSON结构

    {
  "headline": [
    {
      "headlineText": "example en headline",
      "language": "en"
    },
    {
      "headlineText": "example de headline",
      "language": "de"
    }
  ],
  "bodyText": [
    {
      "bodyText": "example en bodytext",
      "language": "en"
    },
    {
      "bodyText": "example de bodytext",
      "language": "de"
    }
  ],
  "location": {
    "name": "mkontheway",
    "openingHours": [
      {
        "day": "Mon-frd",
        "timing": "10.00PM-9AM"
      }
    ],
  }
}

修改了屏幕截图以获取实际要求。需要添加的每个字段的右侧删除按钮

请帮助我如何以角度实现这一目标。

Answer 1

看台：

It looks like you're using ngModel on the same form field as formControlName.
Support for using the ngModel input property and ngModelChange event with
reactive form directives has been deprecated in Angular v6 and will be removed
in a future version of Angular.

For more information on this, see our API docs here:
https://angular.io/api/forms/FormControlName#use-with-ngmodel

这是一个警告，然后每次单击添加按钮时都会出现错误：

ERROR
Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '{
"headline": [
{
"headlineText": "example headline",
"language": "en"
},
{
"headlineText": null,
"language": null
}
],
"bodyText": [
{
"bodyText": "example bodytext",
"language": "en"
}
],
"location": {
"name": "mkontheway",
"openingHours": [
{
"day": "Mon-frd",
"timing": "10.00PM-9AM"
}
],
"address": {
"postCode": null,
"country": null
}
}
}'. Current value: '{
"headline": [
{
"headlineText": "example headline",
"language": "en"
},
{
"headlineText": null,
"language": "en"
}
],
"bodyText": [
{
"bodyText": "example bodytext",
"language": "en"
}
],
"location": {
"name": "mkontheway",
"openingHours": [
{
"day": "Mon-frd",
"timing": "10.00PM-9AM"
}
],
"address": {
"postCode": null,
"country": null
}
}
}'.. Find more at https://angular.io/errors/NG0100