如何动态添加"材质选择"下拉列表的过滤值

Question

请告诉我应该怎么做，这样formArray的每一行都不会更改其他行中已经选择的值的值？

请注意：动态添加控件并在筛选器中正确获取值是有效的。只有当我更改它时，它才会继续并更改其他下拉菜单。非常感谢。

我有一个工作FormArray，它的控件是在按下按钮时动态添加的。控件有两个下拉菜单，第二个下拉菜单的值会根据第一个下拉菜单而变化。

但是当我添加下一个动态控件并更改第二个下拉列表的值时，它也会重置第一个已选择值的值。我用的是<mat-select>材料。

我的HTML:

<form [formGroup]="allocationForm" autocomplete="off">
<div fxLayoutAlign="start center" id="allocationsDiv" class="container row">
<mat-card-title style="text-align: left;">Models
<button mat-raised-button class="mat-raised-button-custom" style="padding: 3px;"
(click)="onAddCars()">Add Cars</button></mat-card-title>
<ng-container formArrayName="allocationsArray">
<div *ngFor="let ctrl of allocationControls.controls; let i = index" [formGroupName]="i">
<mat-form-field appearance="outline" style="width: 250px;padding: 3px;">
<mat-label>Car Model</mat-label>
<mat-select formControlName="carModel" id="carModel"
(selectionChange)="filterCarModel($event, i)">
<mat-option *ngFor="let models of distinctModels" [value]="models">{{models}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" style="width: 350px;padding: 3px;">
<mat-label>Car Submodel</mat-label>
<mat-select formControlName="subModel" id="subModel" (selectionChange)="filtersubModel($event)">
<mat-option *ngFor="let subModel of subModels" [value]="subModel.itemValue">
{{subModel.displayValue}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</form>

onAddCars()方法将新控件推送到allocationsArray

My ts:对于filterCarModel方法

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()));
this.subModels = Array<Productdropdown>();
carList.forEach(productLists => {
const tempItem = new Productdropdown();
tempItem.displayValue = productLists["carDescription"]
tempItem.itemValue = productLists["carCode"]
this.subModels.push(tempItem);
});
}

如何过滤第二个控件值，而不更改代码中allocationsArray第一行中已选择的值。使用角7x

onAddCars()是这样的。。

public onAddCars(){
this.allocationControls.push(this.formBuilder.group({carModel: '',subModel:''}))
}

你能告诉我该怎么做吗？这样formArray的每一行都不会改变其他行中已经选择的值的值？任何帮助都将不胜感激。请注意：动态添加控件并在筛选器中正确获取值是有效的。只有当我更改它时，它才会继续并更改其他下拉菜单。非常感谢。

Answer 1

您只有一个在所有表单中使用的唯一变量"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'}]
},
]

我想象一个有模型和子模型的formArray，所以我们制作了两个函数

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 中看到

Answer 2

Eliseo。。我必须接受你的回答，因为这对我来说是正确的方向。下面是我不得不更改的代码

<mat-option *ngFor="let subModel of subModels[i]" [value]="subModel.itemValue">
{{subModel.displayValue}}
</mat-option>

并介绍了subModelsany[][]=[]的数组正如您所指出的，但我设法使用了FormArray，而不是您的解决方案。