我正在处理表单,我想使用另一个选择来启用选择(默认情况下禁用),并根据第一个值填充数据,为此,我尝试了:
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="50">
<mat-label>Marque*</mat-label>
<mat-select formControlName="Marque" [(ngModel)]="selected" (ngModelChange)="onmarquechange()">
<mat-option *ngFor="let mar of MarqueListe" [value]="mar.Enum">{{mar.Name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50">
<mat-label>Modèle*</mat-label>
<mat-select formControlName="Modele" [(ngModel)]="selected" [disabled]="selectmodele">
<mat-option *ngFor="let mod of ModelListe" [value]="mod.Enum">{{mod.Name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
我的组件:
selectmodele = false;
ModelListe =[];// contains select data (by default empty)
ModelStockListe =[];//Contains Array of objects
onmarquechange(){
this.selectmodele = true;
console.log(this.selectmodele);
console.log(this.idSearchForm.get('Marque').value);//Acess to the first select value
let valueofmarque = this.idSearchForm.get('Marque').value;
console.log(this.ModelStockListe[valueofmarque]);
this.ModelListe = this.ModelStockListe[valueofmarque];
}
select onmarquechange()可以在进行填充选择更改后的数据填充模型选择上正常工作,但是我发现了两个问题:
1-当我更改选取值时,第二个选择仍然禁用 2-当我尝试选择模型选择选项中的一个选项时,我不知道为什么两个选择都将它们重置为值!