在 PrimeNG 下拉列表中自动完成关闭

在 PrimeNG 下拉列表组件中，当用户选择一个选项后，下拉列表不会自动关闭。这可能会让用户感到困惑，因为他们可能希望下拉列表在选择一个选项后立即关闭。

为了解决这个问题，我们可以使用以下技巧来自动关闭 PrimeNG 下拉列表：

步骤

1. 在 HTML 中，为下拉列表添加 [(ngModel)] 属性来捕获用户的选择。例如：

   <p-dropdown [(ngModel)]="selectedOption" [options]="options"></p-dropdown>
   

2. 在组件的代码中，添加一个名为 onOptionSelect() 的方法来处理选项选择事件。例如：

   onOptionSelect() {
     // Do something with selectedOption
   }
   

3. 在 onOptionSelect() 方法中，使用 ViewChild 来获取下拉列表组件的实例，并调用 hide() 方法来关闭下拉列表。例如：

   import { Component, ViewChild } from '@angular/core';
   import { Dropdown } from 'primeng/dropdown';
   
   @Component({
     selector: 'app-dropdown',
     templateUrl: './dropdown.component.html'
   })
   export class DropdownComponent {
     @ViewChild('dropdown') dropdown: Dropdown;
     
     selectedOption: string;
     options: string[] = ['Option 1', 'Option 2', 'Option 3'];
     
     onOptionSelect() {
       // Do something with selectedOption
       this.dropdown.hide();
     }
   }
   

4. 在 HTML 中，给下拉列表组件添加名为 #dropdown 的模板引用变量。例如：

   <p-dropdown [(ngModel)]="selectedOption" [options]="options" #dropdown></p-dropdown>
   

5. 现在，当用户选择一个选项时，下拉列表将自动关闭。

结论

在 PrimeNG 下拉列表中自动关闭选项后的下拉列表并不复杂。我们只需要获取下拉列表组件的实例，并调用 hide() 方法来关闭它即可。记得添加模板引用变量和在 onOptionSelect() 中调用 hide() 方法。