Html 单击按钮时如何添加/删除字段集

我正在Angular2/Typescript中编程，对于add表单，我需要添加添加/删除一个字段集的可能性，其中输入链接到ViewModel。所以基本上，我有一个主视图模型，它包含一个次视图模型表（fieldset）。我尝试过不同的东西，但我是新手，所以我可能错过了重要的东西

以下是我的HTML代码的代码：

客户：
{{客户}}
提供的服务：
{{service}}
服务窗口：
{{window}
DRP联系信息
DRP联系人姓名：
开始时间：
结束时间：
中等：
{{medium}}
DRP联系地址：
去除
添加联系人

您可以使用

ngFor

的索引删除正确的

字段集

：

在模板中：

<fieldset *ngFor="#choice of choices; let id = index">
  //Code ...
  <button class="remove" (click)="onRemoveFieldset(id)">Remove</button>
</fieldset>

这假设您有一个与

DrpDetailViewModel（id）

---

你所做的有什么问题吗？目前，onAddFieldset和onRemoveFieldset不像我希望的那样工作。现在，他们只是在表的末尾添加一个字段集，当我创建（例如）5个字段集时，如果我删除第二个字段集，它将只删除选项卡中的最后一个字段集，而不是第二个字段集。我不知道我是否解释得很好。我想要的是，当我单击Add时，它会创建一个新的字段集，并在其后面实现ViewModel表（tabDrpContact）。我会尝试，稍后我会回来；）我已经添加了我的两个视图模型，这样您可以更好地查看我想要的内容。因此

DrpDetailViewModel

实现了

Drp

？DrpDetailViewModel=Drp，它是相同的视图模型，但有一些不同（对于select）。我对DrpContact（DrpContactDetailViewModel）也有相同的定义。我使用这些“细节”视图模型进行添加、编辑操作

onAddFieldset() {
    let newItemNo = this.choices.length +1;
    this.choices.push(new DrpDetailViewModel(newItemNo));
}

onRemoveFieldset(id:number) {
    this.choices.splice(id,1);
}

class DrpContactDetailViewModel extends Serializable {
  id:number;
  contactName:string;
  timeStart:string;
  timeEnd:string;
  selectedMedium:SelectOptionElement;
  selectedMediumStr:string;
  value:string;

  medium:SelectOptionElement[];
  mediumsListStr:String[];

  constructor(id : number) { this.id = id }
}