Angular 动态添加从属垫下拉列表

我有一个场景，我有两个下拉列表，都是角度反应形式，都是依赖的，所以当我选择第一个下拉列表时，我会填充第二个下拉列表。在表单的下方，我有一个按钮名为add and remove，所以当我们单击add时，我们的整个div都被克隆了，另外一个div也有相同的场景，这会继续下去，当单击remove时，它会删除克隆的div。现在，我可以成功地将每个下拉列表中的值克隆/删除/获取到一个数组中 现在的问题是，当我将同一下拉列表的值更改为其他值时，在我的结果数组中，它会给出两个结果，这是我的第一个选择，下面的当前选择是我的代码

 onValueChange(event: any) {
    this.customFieldChoiceProp.push(event.value);
    const target = event.source.selected._element.nativeElement;
    const selectedData = {
      value: event.value,
      text: target.innerText.trim(),
    };
    **this.customFieldValueChoiceOption.push(selectedData.text);**
    this.customFieldArray.forEach((items: any) => {
      items.isSelected = true;
    });
    this.getFormValues();
  }

我添加**的那一行是我将每个选择放入一个数组的那一行。现在我这样做是因为我有下拉列表，它在点击添加按钮时动态创建，所以对于每个新的下拉列表，我在这里推送值，但问题是，如果我将相同下拉列表中的值更改为5-10倍，它将相同下拉列表中的值推送到数组中，我知道我的逻辑是错误的，但有人能帮助我实现这一点吗

会很有帮助的 下面是我的场景的图片