Html 角度反应形式-数组值的动态构建（基于迭代隐藏和显示值）

我需要根据以下格式JSON填充值

    "days": [
      {
        "date": "2020-09-21T09:00:04.206+00:00",
        "nodes": [
          {
            "type": "leg",
            "from": "airport",
            "to": "oshiage station",
            "cost": 1170
          },
         {
            "type": "activity",
            "category": "food",
            "cost": 200,
            "location": "ramen place"
          }
          {
            "type": "activity",
            "category": "food",
            "cost": 2000,
            "location": "soup curry restaurant",
          },      
        ]
      }
    ]

表单中还有单独的按钮，如“添加腿”和“添加活动”

我无法分别控制这两种类型的节点，因此我决定在添加活动时隐藏leg属性的div类，在添加leg时隐藏活动，最后在发送到服务器之前删除空值，以便以受尊重的JSON格式获取它

但是，我无法实现迭代表单的显示和隐藏行为。 单击“活动”按钮时，将为第一次迭代填充“活动”表单，当我想在单击按钮后添加支腿值时，也将填充上一次迭代中隐藏的支腿值

是否有任何方法可以根据迭代隐藏和显示值

示例.ts文件：

  form: FormGroup;
  bubbleActivity:any;
  bubbleTravel:any;
 addTravel(ix){
    this.bubbleTravel = true;
    const control = (<FormArray>this.form.controls['days']).at(ix).get('nodes') as FormArray;
    control.push(
        this.fb.group({
            type: 'leg',
            from: '',
            to: '',
            cost:'',
            category: null,
            costActivity: null,
            location:null,
          })
    )
  }
addActivity(ix) {
    this.bubbleActivity = true;
    const control = (<FormArray>this.form.controls['days']).at(ix).get('nodes') as FormArray;
    control.push
    (
        this.fb.group({
            type: 'activity',
            from: null,
            to: null,
            cost:null,
            category: '',
            costActivity: '',
            location:'',
          })
    )
  }

形式：FormGroup；
起泡性：任何；
泡泡旅行：任何；
addTravel（九）{
this.bubbleTravel=true；
const control=（this.form.controls['days']）。at（ix.get（'nodes'）作为FormArray；
控制按钮(
本集团({
类型：'腿'，
从：“”，
至：''，
成本：''，
类别：空，
costActivity:null，
位置：空，
})
)
}
补充活动（九）{
this.bubbleActivity=true；
const control=（this.form.controls['days']）。at（ix.get（'nodes'）作为FormArray；
控制按钮
(
本集团({
类型：“活动”，
from:null，
至：空，
成本：空，
类别：“”，
成本活动：“”，
位置：“”，
})
)
}

期望： 如果我为前两个迭代添加活动，然后单击leg按钮，我希望只在第三个迭代中显示leg，而不在前两个迭代中显示。继续，如果我点击活动按钮，应该是第四次迭代。基本上是试图在同一个阵列上实现单独的控制

---

请建议您是否找到其他替代方案。

或者，您可以将表格分成两部分。使用有条件渲染的div包装表单片段。使用

类型

作为条件提供程序，如下所示：

<div *ngIf="Y.value.type === 'leg'">
 <!-- leg  form controls here -->
</div>
<div *ngIf="Y.value.type === 'activity'">
 <!-- activity form controls here -->
</div>

并且不要用空值初始化表单