javascript - 如果用户从 Angular Material 中的单选按钮更改，如何重置下拉值？

Question

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

    }

  }

但这不起作用。

那么如何实现这个目标？

谢谢

Answer 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 // Just unset the value to an empty string

reset(){
    this.selectedValueOptie = '';
  }