角度形式的 removeAt() 总是删除第一个值

Question

我注意到当我从FormArray中删除一个元素时，它总是删除第一个条目，而不是传递到其中的索引。 更奇怪的是，当我控制台时.log传递给我的函数的值应该是number类型，我得到了一个完整的FormControl对象，我无法理解如何或为什么会发生这种情况。

总的来说，我正在创建一个 SVG 解析器，并且正在处理一个表单，供用户编辑和/或修改，然后在 SVG 被解析并塑造成数据对象后将其保存到数据库。 我希望用户能够添加或删除属性和样式的字段，所以我有一个如下所示的机制

AttributeListComponent.ts

export class AttributeListComponent implements OnInit {
@Input() AttributeListData: FormArray;
constructor() { }
ngOnInit() {
//this.showData();
}
showData(){ console.log(this.AttributeListData); }

addAttribute(): void{
const newAttribute: FormGroup = CreateAttributeForm();
let attrList: FormArray = <FormArray>this.AttributeListData as FormArray;
//console.log(newAttribute);
attrList.push(newAttribute);
//this.showData();
}
deleteAttribute(item: number): void{
let attrList:FormArray = this.AttributeListData as FormArray;
console.log(item);
attrList.removeAt(item);
//this.AttributeListData.removeAt(item);
}
}

属性列表组件.html

<section>
<article *ngIf="!AttributeListData">
<p>loading</p>
</article>
<article *ngIf="AttributeListData">
<h5 *ngIf="AttributeListData.controls.length === 0">no attributes</h5>
<section *ngIf="AttributeListData.controls.length > 0">

<article *ngFor="let item of AttributeListData.controls; let i of index">
<attribute-form-component  [AttributeFormData]="item"></attribute-form-component>
<button (click)="deleteAttribute(i)">delete</button>
</article>

</section>
</article>
<article>
<button (click)="addAttribute()">add</button>
</article>
</section>

AttributeFormComponent.ts

export class AttributeFormComponent implements OnInit {
@Input() AttributeFormData: FormGroup;
constructor() { }
ngOnInit() {
}
}

AttrbuteFormComponent.html

<article>
<label for="attribute">
<input
type="text"
name="attribute"
id="attribute"
[value]="AttributeFormData.controls.attribute.value[0]"
formControlName="attribute"
/>
</label>
<label for="setting">
<input
type="text"
name="setting"
id="setting"
[value]="AttributeFormData.controls.setting.value[0]"
formControlName="setting"
/>
</label>
</article>

看到整体机制本质上是如此动态，我决定创建单独的函数来创建表单的不同部分，这就是CreateAttributeForm()在看起来像这样的AttributeListComponent中发挥作用的原因。

创建属性窗体

export function CreateAttributeForm(data?: OvaadGraphicAttribute): FormGroup{
return new FormGroup({
attribute: new FormControl([(data ? data.attribute : ''), Validators.required]),
setting:   new FormControl([(data ? data.setting : ''), Validators.required])
}) as FormGroup;
}

现在，如果我们查看下面的deleteAttribute()函数，console.log()以某种方式返回整个FormGroup对象。

deleteAttribute(item: number): void{
let attrList:FormArray = this.AttributeListData as FormArray;
console.log(item);
attrList.removeAt(item);
//this.AttributeListData.removeAt(item);
}

我什至将其更改为console.log(item.controls)，即使VSCode抛出了自己的内部错误告诉我

属性"控件"在类型"number"上不存在。ts(2339(

它仍然注销了 FormGroup 的控件，所以我真的不明白这种情况是如何或为什么发生的，尤其是在item:number同时没有抛出类型错误。 有人能发现我做错了什么吗？ 我还没有开始使用ControlValueAccessor或任何东西来更新父表单中的值，并且想知道这是否与此有关，因为我老实说找不到任何指向我们需要做的额外事情以删除正确的项目。一切都只是将let i of index和ourDeleteItemFunction(i)显示为点击事件。

Answer 1

好的，我刚刚发现了问题。 当我有let i of index时，ngFor条件应该let i = index.所以它应该看起来像这样

<article *ngFor="let item of AttributeListData.controls; let i = index">
...
</article>

它仍然没有解释如何将FormObject传递给类型number的参数，但它现在可以:)