Если выбрано значение Да, то мне нужно показать 3-й выпадающий, в противном случае 3-й выпадающий должен скрыть

Question

У меня есть три выпадающих поля, если вы нажмете, вы получите два варианта.Для 2-го DropDown, если я выберу опцию YES, мне нужно скрыть 3-й выпадающий.Как я могу сделать это в Angular-Material, если я использую ngModel на "mat-select". Это не работает Может кто-нибудь помочь мне в этом ??Заранее спасибо ..

<div class="space">
<mat-form-field>
  <mat-label>Is this partner a PEP?</mat-label>
  <mat-select disableRipple>
    <mat-option value=""></mat-option>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Does this partner blacklisted</mat-label>
  <mat-select disableRipple >
    <mat-option value=""></mat-option>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Blacklist Name(s)</mat-label>
  <mat-select>
   </mat-select>
</mat-form-field>
</div>

Answer 1

Вы должны использовать value, а не ngModel, например:

HTML:

<mat-form-field>
  <mat-label>Is this partner a PEP?</mat-label>
  <mat-select disableRipple>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
  <mat-label>Does this partner blacklisted</mat-label>
  <mat-select disableRipple [(value)]="selected">
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field *ngIf="selected == 1">
  <mat-label>Blacklist Name(s)</mat-label>
  <mat-select>
   </mat-select>
</mat-form-field>

TS:

export class SelectValueBindingExample {
  selected = '1';
}

StackBlitz

Answer 2

Вы можете использовать Template Reference variable для него, как

  <mat-select disableRipple #second>
    <mat-option value=""></mat-option>
    <mat-option value="1">Yes</mat-option>
    <mat-option value="2">No</mat-option>
  </mat-select>
  <mat-select *ngIf="second.value != 1">
     <mat-option value=""></mat-option>
   </mat-select>

STACKBLITZ