Angular 添加/删除某些控件后，角度模板驱动的形状会发生更改

字段集包含可调整数量的“选择”下拉列表，每个列表后面都有一个按钮（最后一个除外），用于抑制该列表。 最后一个选择控件上的选择会将新的选择控件添加到列表中

更新
{{option.name}-{{option.reference}
清楚的

这些被绑定到一个字符串数组（字符串| null），数组的最后一个索引以编程方式设置为null

请参见此处的Stackblitz：

“x”叉删除选择输入。 更改最后一个select（包含null）时，会将另一个null推送到数组中

为了进行调试，模板以JSON显示表单内容，Javascript浏览器控制台转储模型变量以进行比较

问题：遵循以下简单的操作顺序：

将最后一个选择更改为另一个值，例如“Taz-A005”

使用此行的“x”按钮删除第一个选择“大力水手-A002”

更改最后一次选择中的值，例如再次使用“大力水手-A002”，但它在任何其他情况下都失败 （对选择的进一步更改将导致所选选项的错误显示）

此时，模板显示两个项（A002和null）的错误列表，而UI显示3个选择控件，Javascript也正确转储这三个控件

我猜这是由于使用循环索引命名选择的方式造成的：

---

是否有人知道如何使用模板驱动表单更正此问题？

出现此问题的原因是您使用索引命名表单值，并使用相同的索引访问值。从数组中删除项时，索引所属的值会更改，但从索引生成的表单值保持不变。这就造成了问题。有一种方法可以创建内联ID，并在模型和表单值中使用它们

export类SelectInsertErrorExample实现OnInit{
公共数据集：{
数据：字符串| null；id:数字
}[] = [];
私有_idProvider=0；
构造函数（私有对话框：MatDialog）{}
获取idProvider（）{
返回此文件。_idProvider++；
}
恩戈尼尼特（）{
//省略
这个是.DataSet.push({
数据：“A005”，
id:这是idProvider
});
这个是.DataSet.push({
数据：空，
id:这是idProvider
});
}
checkDataEntry（索引：编号）{
//确保存在虚拟条目
如果（！this.DataSet.some（t=>t.data==null））{
设置超时（（）=>{
这个是.DataSet.push({
数据：空，
id:这是idProvider
});
log（“新数据集：%o”，this.dataset.join（））；
}, 1);
}
}
removeResponseEntry（索引：编号）{
this.DataSet=this.DataSet.filter（函数（值，ix，arr）{
返回ix！=索引；
});
}
}

字符串数据的设置列表
更新
{{option.name}-{{option.reference}
清楚的
格式：{Form.value | json}
数据：{{DataSet | json}}

谢谢，这篇文章很棒。同时，我简单地通过调用以下函数替换HTML代码{{'select'+index}}中的名称表达式来修复它：computeName（index:number）{return'name'+this.DataSet[index]；}。只要数据集中没有重复项，这似乎是可行的，我通过使用选项列表上的管道来保证这一点。