Невозможно закрыть ngb-datepicker с помощью .close () (.close () не является функцией) - PullRequest
Новая
       33

Невозможно закрыть ngb-datepicker с помощью .close () (.close () не является функцией)

0 голосов
/ 02 октября 2018

Я пытаюсь настроить 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();
    }
}

Любые идеи относительно того, что мне не хватает

1 Ответ

0 голосов
/ 02 октября 2018

Закрытие ngb-datepicker с помощью щелчка снаружи - это открытый выпуск ng-bootstrap с 2016 года. Посмотрите на эту проблему .

Возможные обходные пути:

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