(Angular2 和 Typescript)Angular 的 DatePicker 无法读取未定义的属性“切换”

DoubleClickOnThis

我无法点击 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-b​​rowser.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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular2:无法读取未定义的属性“名称”

angular2:错误:TypeError:无法读取未定义的属性“ ...”

angular2形式-无法读取未定义的属性替换

Angular2:TypeError:无法读取未定义的属性“ Symbol(Symbol.iterator)”

Angular2 * ngFor:“无法读取未定义的属性'0'”

无法读取未定义的属性退订:Angular2测试

Angular2无法读取未定义的属性“ push”

无法读取未定义[Angular2]的属性“ isStopped”

Angular2和BootStrap切换

无法读取未定义angular2的属性

无法读取Angular2 Typescript中未定义的属性“值”

无法读取原生脚本angular2中未定义的属性全局数组

NgZone / Angular2 / Ionic2 TypeError:无法读取未定义的属性“运行”

Typescript / Angular2 TypeError:无法读取未定义的属性

TypeError:无法读取angular2中未定义的属性“ 0”以在datepicker中使用索引

无法读取Angular和Firebase身份验证中未定义的属性“用户”

Keycloak和Angular-无法读取未定义的属性'resourceAccess'

无法读取未定义的Angular / TypeScript属性'forEach'

Angular2 / Typescript对象和属性绑定到模板

Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

Angular 2与javascript和datepicker

Angular2(RC-4):无法读取未定义的属性“ pathsWithParams”

Angular2 FormBuilder和嵌套对象属性返回未定义

Angular无法读取未定义的属性

无法读取未定义的 Angular/Typescript 的属性“推送”

无法读取未定义的 Typescript / Angular 6 的属性“推送”

Angular8 和 OpenLayers 6:错误类型错误:无法读取未定义的属性“forEachFeatureAtPixel”

Angular 和 CharJS - 错误类型错误:无法读取未定义的属性“15”

无法读取未定义 Angular 的属性