无法使用 .close() 关闭 ngb-datepicker (.close() 不是一个函数)

Question

我正在尝试设置一个ngb日期选择器，以便在单击其外部时关闭。但是，我收到此错误：

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)

相关网页如下

<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 的一个未解决的问题。看看这个问题。

可能的解决方法：

一(

使用视图：

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