Как сбросить значение выпадающего меню, если пользователь переключился с переключателя в материале Angular?

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>

Компонент // Просто сбросьте значение в пустую строку

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

Answer 2

Вы должны установить значение неопределенным.

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

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

    }

  }