我有6个单选按钮,例如:
<mat-radio-button
*ngFor="let option of searchOptions"
[value]="option"
(change)="setSelectedSearchOptions(option.label)"
>
{{ option.label }}
</mat-radio-button>
而且我有这样的下拉列表:
<div class="search-select searchoptions" *ngIf="showDropdownVcheqCode && selectedSearch">
<mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (ngModelChange) = "reset()" >
<mat-option *ngFor="let option of returnEcheqCodes$ " value="{{option.family}}" > {{ option.title}} </mat-option>
</mat-select>
</div>
因此,如果用户从一个单选按钮切换到另一个单选按钮。从下拉列表中选择的值必须重置。
我尝试使用此功能:
reset(optionLabel: string){
if (optionLabel === 'QrCode') {
this.selectedValueOptie = '';
}
if(optionLabel === 'Vcheq' ) {
this.selectedValueOptie = '';
}
}
但是那不起作用。
如何归档?
谢谢
因此,首先您必须在<option>
内添加一个具有空值的mat-select
,然后在reset function
内添加selectedValueOptie
的值。
HTML
<div class="search-select searchoptions" *ngIf="showDropdownVcheqCode && selectedSearch">
<mat-select placeholder="Opties" name="option" [(ngModel)]="selectedValueOptie" (ngModelChange) = "reset()" >
<mat-option value="">Please Select</mat-option>
<mat-option *ngFor="let option of returnEcheqCodes$ " value="{{option.family}}" > {{ option.title}} </mat-option>
</mat-select>
</div>
Component //仅将值设置为空字符串
reset(){
this.selectedValueOptie = '';
}
您必须将值设置为undefined。
reset(optionLabel: string){
if (optionLabel === 'QrCode') {
this.selectedValueOptie = undefined;
}
if(optionLabel === 'Vcheq' ) {
this.selectedValueOptie = undefined;
}
}