如何在 p-dialog 关闭时关闭 p-dropdown？

Question

我有一个由 ngprime p-dialog 组成的角度组件。在此对话框的正文中有 p-dropdown。当我点击下拉选项时，会显示，但有些情况是用户不小心可以点击关闭对话框。第二次打开对话框时，双击后下拉选项可用，因为 onHide 事件在第一次单击时执行。有没有办法在关闭对话框时关闭 p-dropdown 选项？这是代码

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

Answer 1

p-dropdown 有一个方法focus() 你可以在你的模态打开后调用它。 （使用p-dialog 的onShow() 事件调用

控制器

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>