如果值选择是，那么我需要显示第三个下拉菜单，否则第三个下拉菜单应该隐藏

Question

我有三个下拉字段，如果你点击，你会得到两个选项。 对于第二个下拉菜单，如果我选择选项是，我需要隐藏第三个下拉菜单。 我怎么能在 Angular-Material 中做到这一点，如果我在“mat-select”上使用 ngModel 它不起作用 任何人都可以帮助我吗？ 提前谢谢..

<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