如何基于切换隐藏输入元素？

Question

我来自MVC背景，所以我对Angular来说相对较新。我有一个切换滑块，我想用它来显示/隐藏它下面的另一个输入字段。选中切换，显示字段。取消选中切换，隐藏字段。我有问题是anuglar材料下划线和placehohlder文本没有隐藏。或者有更好的方法来处理这个，也许以不同/更好的方式呈现它？谢谢你的时间。

<div fxLayout="column">
  <div fxLayout="column">
    <span class="mb-8">Show Preposition</span>
    <mat-slide-toggle matInput name="prepositionCheckbox" formControlName="prepositionCheckbox" (click)="togglePreposition()"></mat-slide-toggle>
  </div>
  <mat-form-field fxFlex="22.5">
    <input [hidden]="!isPrepositionChecked" matInput name="preposition" formControlName="preposition" placeholder="Preposition For Location">
  </mat-form-field>
</div>

隐藏：

所示：

Answer 1

为什么不隐藏mat-form-field？

  <mat-form-field fxFlex="22.5"  [hidden]="!isPrepositionChecked" >
     <input matInput name="preposition" formControlName="preposition" placeholder="Preposition For Location">
   </mat-form-field>

或尝试* ngIf

  <mat-form-field fxFlex="22.5"  *ngIf="!isPrepositionChecked" >
     <input matInput name="preposition" formControlName="preposition" placeholder="Preposition For Location">
   </mat-form-field>