у вас есть только уникальная переменная "subModels", которая используется во всех ваших формах, поэтому вы можете сделать это следующим образом.
Одним из подходов является то, что subModels был массивом или массивами
//declare subModels as array of any
subModels:any[]=[]
public filterCarModel(e:any,ind:any)
{
let index = <FormArray>this.allocationForm.controls['allocationsArray'];
var carList = Array.from(new Set(this.productsDTO.filter(x => x.productType === e.value).sort().values()));
//here declare this.subModels[ind] as an array
this.subModels[ind] = Array<Productdropdown>();
carList.forEach(productLists => {
const tempItem = new Productdropdown();
tempItem.displayValue = productLists["carDescription"]
tempItem.itemValue = productLists["carCode"]
//you push the element in this.subModels[ind]
this.subModels[ind].push(tempItem);
});
}
Другой подход состоит в том, что ваш productList был и массив с детьми. Представьте, что у вас есть что-то вроде
modelList=[{
id:1,
model:'Audi',
submodels:[{id:10,name:'A3'},{id:11,name:'Quatro'}]
},
{
id:2,
model:'Seat',
submodels:[{id:20,name:'Ibiza'},{id:21,name:'Panda'},{id:22,name:'Leon'}]
},
]
Я представляю массив формы с моделью и подмоделью, поэтому мы создаем две функции
getLine(data:any)
{
data=data || {model:'',submodel:''}
return new FormGroup({
model:new FormControl(data.model),
submodel:new FormControl(data.model)
})
}
addLine()
{
this.formArray.push(this.getLine(null))
}
Я собираюсь использовать вспомогательную переменную и [ngModel] в виде. Обратите внимание, что переменная не принадлежит форме formArray, я использую ее как вспомогательный и использую (ngModelChange), чтобы присвоить значение formArray.get ('model')
Моя переменная
model:any[]=[]
И. html
<button mat-button (click)="addLine()">Add</button>
<form [formGroup]="formArray">
<div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
<mat-form-field>
<mat-label>Model</mat-label>
<!-- the ngModel is model[i] -->
<mat-select [ngModel]="model[i]"
<!--in ngModelChange we equal model[i] to event
and give value to group.get('model')-->
(ngModelChange)="model[i]=$event;group.get('model').setValue($event.id)"
<!--I need indicate that the ngModel is NOT belong to the form-->
[ngModelOptions]="{standalone:true}"
>
<!--see that value is the "modelo", ALL the object-->
<mat-option *ngFor="let modelo of modelList" [value]="modelo">
{{modelo.model}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>SubModel</mat-label>
<!--this select use formControlName as ussuall-->
<mat-select formControlName="submodel">
<!--here I can use model[i].submodels-->
<mat-option *ngFor="let submodelo of model[i]?.submodels" [value]="submodelo.id">
{{submodelo.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
Вы можете увидеть в stackblitz