我无法点击 angular2 的日期选择器的日历图标。它一直给我这个错误:
类型错误:无法读取 Object.eval [as handleEvent] (AdmissionDialogComponent.html:1) at handleEvent (core.es5.js?de3d:11997) at callWithDebugContext (core.es5.js?de3d:13458) 处未定义的属性“切换” ) at Object.debugHandleEvent [as handleEvent] (core.es5.js?de3d:13046) at dispatchEvent (core.es5.js?de3d:8601) at eval (core.es5.js?de3d:9212) at HTMLButtonElement.eval (platform-browser.es5.js?41b7:2651) 在 ZoneDelegate.invokeTask (zone.js?6524:424) 在 Object.onInvokeTask (core.es5.js?de3d:3881) 在 ZoneDelegate.invokeTask (zone.js? 6524:423)
以下是我无法使用的开始日期和结束日期的代码:
<div class="col-sm-2">
<div class="input-group">
<input id="field_treatmentStartDate" type="text" class="form-control" name="treatmentStartDate" ngbDatepicker #tStartDateDp="ngbDatepicker"
*ngIf="admission.treatment" [(ngModel)]="admission.treatment.startDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" (click)="tStartDateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div [hidden]="!(editForm.controls.treatmentStartDate?.dirty && editForm.controls.treatmentStartDate?.invalid)">
<small class="form-text text-danger" [hidden]="!editForm.controls.treatmentStartDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal">
This field should be a date and time.
</small>
</div>
<div [hidden]="!treatmentStartDateIsNull">
<small class="form-text text-danger">
Missing treatment start date.
</small>
</div>
</div>
<!-- start date -->
<div class="col-sm-2">
<div class="input-group">
<input id="field_treatmentEndDate" type="text" class="form-control" name="treatmentEndDate" ngbDatepicker #tEndDateDp="ngbDatepicker"
*ngIf="admission.treatment" [(ngModel)]="admission.treatment.endDate" (ngModelChange)="admission?.treatment?.endDate ? admission.treatment.endDate = $event : null"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" (click)="tEndDateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div [hidden]="!(editForm.controls.treatmentEndDate?.dirty && editForm.controls.treatmentEndDate?.invalid)">
<small class="form-text text-danger" [hidden]="!editForm.controls.treatmentEndDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal">
This field should be a date and time.
</small>
</div>
<div [hidden]="!treatmentEndDateIsNull">
<small class="form-text text-danger">
Missing treatment end date.
</small>
</div>
</div>
<!-- end date -->
但是,在同一个表单中的某个地方,我确实有另一组开始和结束日期,并且这些日历弹出窗口工作得非常好。
<div class="form-group row">
<!-- Start Date -->
<label class="col-sm-3 form-control-label" jhiTranslate="iconnectSampleAppMonolithApp.admission.startDatetime" for="field_startDate">Start Date</label>
<div class="col-sm-6">
<div class="input-group">
<input id="field_startDate" type="text" class="form-control" name="startDate" ngbDatepicker #startDateDp="ngbDatepicker"
[(ngModel)]="admission.startDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" (click)="startDateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div [hidden]="!(editForm.controls.startDate?.dirty && editForm.controls.startDate?.invalid)">
<small class="form-text text-danger" [hidden]="!editForm.controls.startDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal">
This field should be a date and time.
</small>
</div>
</div>
</div>
<div class="form-group row">
<!-- End Datetime -->
<label class="col-sm-3 form-control-label" jhiTranslate="iconnectSampleAppMonolithApp.admission.endDatetime" for="field_endDate">End Date</label>
<div class="col-sm-6">
<div class="input-group">
<input id="field_endDate" type="text" class="form-control" name="endDate" ngbDatepicker #endDateDp="ngbDatepicker" [(ngModel)]="admission.endDate"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" (click)="endDateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
<div [hidden]="!(editForm.controls.endDate?.dirty && editForm.controls.endDate?.invalid)">
<small class="form-text text-danger" [hidden]="!editForm.controls.endDate?.errors?.ZonedDateTimelocal" jhiTranslate="entity.validation.ZonedDateTimelocal">
This field should be a date and time.
</small>
</div>
</div>
</div>
在 component.ts 文件中,我已将空白值初始化为“ngOnInit”中的准入模型
this.admission.patient = this.patient;
this.admission.bed = this.bed;
this.admission.bed.ward = this.ward;
this.admission.treatment = this.treatment;
所以我不明白为什么有些工作有些不工作。在 ngOnInit 函数上,我已经为准入值声明了空属性。当我的意思是空时,我声明了类似的东西
treatment: Treatment = new Treatment();
将*ngIf
语句移至更高级别div
:
<div class="input-group" *ngIf="admission.treatment">...
并从 <input>
或使用[hidden]
.
由于*ngIf
移除了<input>
从DOM当条件是假的,事件发生在所述条件为真,它产生的错误,因为在本地模板变量引用未装箱。不要将模板变量和 *ngIf 一起使用
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句