如果用户从Angular材质中的单选按钮更改,如何重置下拉值?

问题描述 投票:0回答:2

我有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 = '';

    }

  }

但是那不起作用。

如何归档?

谢谢

javascript angular angular-material radio-button selection
2个回答
1
投票

因此,首先您必须在<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 = '';
  }

0
投票

您必须将值设置为undefined。

reset(optionLabel: string){
    if (optionLabel === 'QrCode') {
      this.selectedValueOptie = undefined;
    }

    if(optionLabel === 'Vcheq' ) {
      this.selectedValueOptie = undefined;

    }

  }
© www.soinside.com 2019 - 2024. All rights reserved.