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

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

只需在组件或 class 的构造函数上方添加一个新的数据绑定属性

showDatePicker: boolean = true;

在您的单选按钮选择挂钩中，将true分配给上述数据绑定属性。

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>

Answer 2

<ng-template [ngIf]="optionLabel=='Registratie'">
 <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>
</ng-template>

这意味着如果 optionLabel=='Registratie' 那么它将显示日期选择器