Question

我正在尝试设置一个ngb-datepicker以在其外部单击时关闭。但是，我收到此错误：

GamesComponent.html:9 ERROR TypeError: dp.close is not a function
at GamesComponent.push../src/web/apps/command-center/games/games.component.ts.GamesComponent.closeCalendar (games.component.ts:202)
at Object.eval [as handleEvent] (GamesComponent.html:12)
at handleEvent (core.js:10050)
at callWithDebugContext (core.js:11143)
at Object.debugHandleEvent [as handleEvent] (core.js:10846)
at dispatchEvent (core.js:7509)
at core.js:7953
at HTMLDocument.<anonymous> (platform-browser.js:1140)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3748)

相关的html在下面

<ng-template #popContent class="col-lg-3 align-items-center">
        <ngb-datepicker (select)="convertNgbDatetoDate($event)"
                        name="dp" ngbDatepicker #d="ngbDatepicker"
                        (blur)="onInputBlur()"
                        (document:click)="closeCalendar($event, d)">
        </ngb-datepicker>
</ng-template>

和ts

closeCalendar(event, dp) {

    console.log(dp)

    const path = event.path.map(p => p.localName);
    if ((!path.includes('ngb-datepicker') && !path.includes('ng- 
    container') && !path.includes('gns-sentient-dates') && 
    !path.includes('howser-input'))) {
        dp.close();
        this.onInputBlur();
    }
}

关于我所缺少的东西有什么想法吗？

Answer 1

自2016年以来，单击外部关闭ngb-datepicker是ng-bootstrap的未解决问题。请看this issue。

可能的解决方法：

A）

使用视图：

(click)="d.toggle(); $event.stopPropagation();" (document:click)="d.close()"

或B）

使用组件：

if(!this._eref.nativeElement.querySelector('ngb-datepicker').contains(event.target)
    && !this._eref.nativeElement.querySelector('.input-group-addon').contains(event.target)) {
    let self = this;
    setTimeout(function(){
       self.dynamicId.close();
    },10);
}

或C）

使用视图：

<input style="background-color: white;" class="form-control" placeholder="YYYY-MM-DD" name="date" [(ngModel)]="date" ngbDatepicker #eToggle="ngbDatepicker" (click)="eToggle.toggle(); sToggle.close();$event.stopPropagation()" (document:click)="decideClosure($event, eToggle)" readonly>

和组件：

decideClosure(event, datepicker) { const path = event.path.map(p => p.localName); if (!path.includes('ngb-datepicker')) { datepicker.close(); } }

无法使用.close（）关闭ngb-datepicker（.close（）不是函数）

1 个答案: