FormArray Angular中的动态id

Question

一切都好吗？我正在使用FormArray，我遇到了以下问题，当试图获取类别的值时，它总是返回相同的值，因为它是一个FormArray，id＝"；类别"；是固定的。我现在可以这样离开id动态：id:"类别"+i。但我并没有因此而对这个id做任何评论："；类别"+i值。动态地。问题是如何动态地获取这个值。提前感谢

Component 
getCategory() {
this.nameList = []
const value = (<HTMLInputElement>document.getElementById("category")).value 
console.log(this.nameList)
this.initcategory(value)
}
initcategory(value) {
console.log(value)
const totalResults = 0;
const searchModel = {
text: '',
status: '',
};
this.feedstockService.getFeedstock(totalResults, searchModel)
.subscribe(response => {
const feedstocks = response.results.filter(x => x.category === value)
feedstocks.forEach(feedstock => this.nameList.push(feedstock.name))
})
}

HTML

<ng-container  [formGroup]="feedstockForm">
<ng-container formArrayName="feedstock">
<accordion [closeOthers]="oneAtATime" *ngFor="let fcFeedStock of feedstockForm.get('feedstock')?.controls; let i = index">
<accordion-group  heading="{{ fcFeedStock.get('position').value }} / {{ fcFeedStock.get('category').value }}" [formGroupName]="i">
<div>
<i class="material-icons close-category" (click)="removeFeedstockCategory(i)">
close
</i>
</div>
<div class="divide-section">
<div class="first-column">
<div class="header-section options">
<span>ADICIONAR COMPONENTE</span>
<i class="material-icons" (click)="addFeedstockComponent(i)">
add
</i>
</div>
<div class="form-group">
<label for="category">CATEGORIA</label>
<select class="form-control" formControlName="category" id="category" (onChange)="getCategory()" (blur)="onCountryChange($event.target.value)">
<option value="" selected ></option>
<option *ngFor="let cat of categories" [value]="cat.value">
{{cat.viewValue}}
</option>
</select>
</div>

Answer 1

Rod，当我们管理FormGroup的FormArray时(我想你想用的方式管理一个数组

data=[{position:..category},{position:..,category:...}]

首先，我们用阵列制作一个吸气剂

get categoryArray()
{
return this.feedstockForm.get('feedstock') as FormArray
}

并制作一个函数，返回一个具有formArray 值的FormGroup

getCategoryGroup(data:any=null)
{
data=data ||{position:0,category:''}
return new FormGroup({
position:new FormGroup(data.position),
category:new FormGroup(data.category)
})
}

请注意，此函数返回FormControls的FormGroup，该FormGroup具有对象"的值；数据"；如果不传递参数，则传递或空FormGroup

因此，我们可以创建类似的formGroup

this.feedstockForm=new FormGroup(
{
new FormArray(data.map(x=>this.getCategoryGroup(x)
})

此外，要向FormArray添加一个新元素，您可以简单地(在定义之前，看看我们是如何使用这两个函数的

addElement(){
this.categoryArray.push(this.getCategoryGroup()))
}