Как закрыть p-раскрывающийся список при закрытии p-диалога? - PullRequest
Новая
       37

Как закрыть p-раскрывающийся список при закрытии p-диалога?

0 голосов
/ 17 февраля 2020

У меня есть angular компонент, состоящий из p-диалога ngprime. В теле этого диалога есть p-выпадающий список. Когда я нажимаю на раскрывающееся меню, отображаются параметры, но возникает ситуация, когда пользователь может случайно щелкнуть закрывающее диалоговое окно. Во второй раз, когда открывается диалоговое окно, параметры раскрывающегося меню доступны после двойного щелчка, поскольку событие onHide выполняется при первом щелчке. Есть ли способ закрыть опции p-выпадающего при закрытии диалога? Вот код

HTML

<p-dialog #dialog [closeOnEscape]="closeDialog" [responsive]="true" [modal]="true" [(visible)]="shown" styleClass="modal"
          [maximizable]="false" [baseZIndex]="1000" minWidth="200px" [width]="669"
          (onHide)="hideModal()" [draggable]="false">
  <p-header class="modal__header">{{category.name}}</p-header>
  <div class="modal__subcategory">
    <p-dropdown #dropdown  placeholder="Choose a sub-category" 
      [options]="subcategories" optionLabel="name [(ngModel)]="selectedSubcategory">
    </p-dropdown>
  </div>
</p-dialog>

TS 

export class SuggestionsComponent implements OnInit {
    @Input()
    category: CategoryDTO;
    @Input()
    shown: boolean;
    @Output()
    onHideModal: EventEmitter<boolean> = new EventEmitter<boolean>();
    subcategories: SubcategoryDTO[];
    selectedSubcategory: SubcategoryDTO;
    newQuestion: string = '';

    constructor(private categoryService: CategoryService, private surveyService: SurveyService,
        private toastNotificationService: ToastNotificationService,
        private internetConnectionService: InternetConnectionService,
        private loadingService: LoadingService) {
        this.onHideModal = new EventEmitter<boolean>();
    }

    ngOnInit() {

        if (this.category.id != null) {
            this.categoryService.getSubcategoriesByCategory(this.category).subscribe(
                subcategories => {
                    this.onHideModal.emit(true);
                    this.subcategories = subcategories.value;
                },
                (error) => {
                    this.internetConnectionService.showToastWhenErrorOccurred(error, " get subcategories");
                }
            );

        }
    }

    hideModal() {
        this.shown = false;
        this.newQuestion = "";
        this.selectedSubcategory = null;
        this.onHideModal.emit(true);
    }
}

1 Ответ

1 голос
/ 17 февраля 2020

p-dropdown имеет метод focus(), который вы можете вызвать после того, как ваш модал был открыт. (Используйте onShow() Событие вашего p-dialog для вызова

Контроллера

onModalShow() Метод 

import { Component, ViewChild } from '@angular/core';


@ViewChild('dropdown') dropdown;

onModalShow() {
    this.dropdown.focus();
}

Шаблон 

<p-dialog #dialog [closeOnEscape]="closeDialog" [responsive]="true" [modal]="true" [(visible)]="shown" styleClass="modal"
        [maximizable]="false" [baseZIndex]="1000" minWidth="200px" [width]="669"
        (onHide)="hideModal()" [draggable]="false" (onShow)="onModalShow()">
<p-header class="modal__header">{{category.name}}</p-header>
<div class="modal__subcategory">
    <p-dropdown #dropdown  placeholder="Choose a sub-category" 
    [options]="subcategories" optionLabel="name [(ngModel)]="selectedSubcategory">
    </p-dropdown>
</div>
</p-dialog>
...