Angular 7 - 多个下拉选择更改
Angular 7 - Multiple Dropdowns Selection Change
我有一个表单数组,该数组由带有 brand
和 model
的 formGroup 组成。
分量:
get brands() {
return this.form.get('groups') as FormArray;
}
addGroup() {
this.groups.push(
this.fb.group({
brand: ['', Validators.required],
model: ['', Validators.required]
})
);
}
removeGroup(index: number) {
this.models.removeAt(index);
}
brandSelect(event: any) {
// I dispatch an action to get the models from the smart component
this.selectedBrand.emit(event);
}
HTML:
<ng-container formArrayName="groups" *ngIf="groups">
<div>
<a href="javascript:void(0)" (click)="addGroup()">
<small>
<i class="fas fa-plus-circle fa-fw margin-xs-r"></i> Add Group
</small>
</a>
</div>
<div *ngFor="let control of groups.controls; index as i">
<div class="text-right margin-sm-b">
<a (click)="removeGroup(i)"> <i class="fas fa-times fa-fw"></i> </a>
</div>
<ng-container [formGroupName]="i">
<mat-form-field appearance="outline">
<mat-label>Brand</mat-label>
<!--Based on the brand selected I dispatch an action to get the models.-->
<mat-select
formControlName="brand"
(selectionChange)="brandSelect($event)"
>
<mat-option *ngFor="let brand of brands" [value]="brand">
{{ brand | titlecase }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Model</mat-label>
<mat-select formControlName="model">
<mat-option *ngFor="let model of models" [value]="model">
<i class="fas fa-angle-right fa-fw margin-xs-r"></i> {{ model }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</ng-container>
brand
和 model
是下拉菜单。我根据所选品牌显示模型列表,我对品牌 selectionChange
发送一个操作以获取模型列表。
因为模型是我订阅的 Observable。当我在表单数组中只有一项时,一切正常。当我添加另一个组时,在品牌 selectionChange
上,model
observable 会更新为最新数据,并且第一个 group
中的 model
变为空白,因为选择了不同的品牌来自第二组。
我在使用 NGRX 时如何处理这种情况?
未知用户,您需要几个"models"。为此,您可以使模型成为一个对象。
想法是,例如,模型是
models={
"seat":["ibiza","leon","panda"],
"kia":["cerato","ceed"]
}
然后你迭代模型[品牌]
<mat-option *ngFor="let model of models[brand]" [value]="model">
<i class="fas fa-angle-right fa-fw margin-xs-r"></i> {{ model }}
</mat-option>
所以,首先将您的模型定义为
models:any={}
并且,更改品牌时填写
models[brand]=....an array of the list of models of this brand
我有一个表单数组,该数组由带有 brand
和 model
的 formGroup 组成。
分量:
get brands() {
return this.form.get('groups') as FormArray;
}
addGroup() {
this.groups.push(
this.fb.group({
brand: ['', Validators.required],
model: ['', Validators.required]
})
);
}
removeGroup(index: number) {
this.models.removeAt(index);
}
brandSelect(event: any) {
// I dispatch an action to get the models from the smart component
this.selectedBrand.emit(event);
}
HTML:
<ng-container formArrayName="groups" *ngIf="groups">
<div>
<a href="javascript:void(0)" (click)="addGroup()">
<small>
<i class="fas fa-plus-circle fa-fw margin-xs-r"></i> Add Group
</small>
</a>
</div>
<div *ngFor="let control of groups.controls; index as i">
<div class="text-right margin-sm-b">
<a (click)="removeGroup(i)"> <i class="fas fa-times fa-fw"></i> </a>
</div>
<ng-container [formGroupName]="i">
<mat-form-field appearance="outline">
<mat-label>Brand</mat-label>
<!--Based on the brand selected I dispatch an action to get the models.-->
<mat-select
formControlName="brand"
(selectionChange)="brandSelect($event)"
>
<mat-option *ngFor="let brand of brands" [value]="brand">
{{ brand | titlecase }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Model</mat-label>
<mat-select formControlName="model">
<mat-option *ngFor="let model of models" [value]="model">
<i class="fas fa-angle-right fa-fw margin-xs-r"></i> {{ model }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</ng-container>
brand
和 model
是下拉菜单。我根据所选品牌显示模型列表,我对品牌 selectionChange
发送一个操作以获取模型列表。
因为模型是我订阅的 Observable。当我在表单数组中只有一项时,一切正常。当我添加另一个组时,在品牌 selectionChange
上,model
observable 会更新为最新数据,并且第一个 group
中的 model
变为空白,因为选择了不同的品牌来自第二组。
我在使用 NGRX 时如何处理这种情况?
未知用户,您需要几个"models"。为此,您可以使模型成为一个对象。
想法是,例如,模型是
models={
"seat":["ibiza","leon","panda"],
"kia":["cerato","ceed"]
}
然后你迭代模型[品牌]
<mat-option *ngFor="let model of models[brand]" [value]="model">
<i class="fas fa-angle-right fa-fw margin-xs-r"></i> {{ model }}
</mat-option>
所以,首先将您的模型定义为
models:any={}
并且,更改品牌时填写
models[brand]=....an array of the list of models of this brand