javascript - 选择单选按钮时如何隐藏日期选择器？

Question

所以，我有日期选择器和单选按钮。我想在选择单选按钮时隐藏日期选择器。

这是日期选择器:

     <div formGroupName="groupDateTwo">
            <mat-form-field class="search-field-input md-datepicker-input-container">
              <input
                matInput
                readonly
                required
                [matDatepicker]="picker2"
                placeholder="start datum"
                formControlName="startDate"
                (ngModelChange)="onChange($event)"
              />
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>

这是选择单选按钮时的情况:

if (optionLabel === 'Registratie') {   


    }

这是日期字段:

startDate: Date;

所以我的问题是，当在 ts 脚本中选择单选按钮时，您可以隐藏日期选择器吗？

谢谢

Answer 1

只需在组件或类的构造函数上方添加一个新的数据绑定(bind)属性，例如

showDatePicker: boolean = true;

并在单选按钮选择 Hook 中，将 true 分配给上述数据绑定(bind)属性。

if (optionLabel === 'Registratie') {   
   this.showDatePicker = false;
}

最后在组件 html 中，使用 *ngIf="expression" 或 [hidden]="expression"

<mat-form-field class="search-field-input md-datepicker-input-container" *ngIf="showDatePicker">
  ...
</mat-form-field>