Question

我无法点击angular2＆＃39;日期选择器的日历图标。它一直给我这个错误：

TypeError：无法读取属性＆＃39;切换＆＃39;未定义的在Object.eval [as handleEvent]（AdmissionDialogComponent.html：1）在handleEvent（core.es5.js？de3d：11997） at callWithDebugContext（core.es5.js？de3d：13458） at Object.debugHandleEvent [as handleEvent]（core.es5.js？de3d：13046）在dispatchEvent（core.es5.js？de3d：8601）在eval（core.es5.js？de3d：9212）在HTMLButtonElement.eval（platform-browser.es5.js？41b7：2651）在ZoneDelegate.invokeTask（zone.js？6524：424） at 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文件中，我已将空白值初始化为＆＃34; ngOnInit＆＃34;

中的准入模型

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();

Answer 1

将*ngIf语句移至更高级div：

<div class="input-group" *ngIf="admission.treatment">...

从<input>

中删除

或使用[hidden]。

当条件为false时，*ngIf从DOM中删除<input>，当条件为真时，当事件发生时，它会生成错误，因为对本地模板变量的引用未被包含。不要一起使用模板变量和* ngIf

（Angular2＆amp; Typescript）Angular的DatePicker无法读取属性＆＃39;切换＆＃39;未定义的

1 个答案: