如果用户从 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

所以首先你必须在 mat-select 中添加一个空值的 <option> 然后在 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 = '';
  }

Answer 2

您必须将值设置为未定义。

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

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

    }

  }

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

How to reset dropdown value if user change from radio button in Angular material?

javascript

selection

radio-button

angular-material

angular