我正在尝试创建一个下拉菜单,当用户单击它外部时它会自动关闭。 在这个菜单中我添加了一个ng-select组件,但是当我点击其中一个选项时,菜单会关闭,因为ng-select的下拉面板在关闭时不在DOM内部,有什么办法可以实现我想要的? 当用户选择 ng-option 时不关闭的下拉菜单? 这里有一个问题的例子: https : //stackblitz.com/edit/angular-8m1ta5?file=src%2Fapp%2Fapp.component.ts

这是我用来跟踪用户点击的代码:

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this.father.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.dropdown = false;
    }
  }

#father标识下拉菜单的容器。

- -更新 - -

我找到了一个解决方案,但也许这不是很干净: https : //stackblitz.com/edit/angular-gymhed我刚刚添加了一个新变量,该变量在 ng-select 关闭后以 500 毫秒的超时时间更改,这样选择 ng-option 后 500ms 内,无法关闭下拉列表。

#1楼 票数:2

属性[closeOnSelect]="false"应该可以完成这项工作。 您必须将其添加到<ng-select>标签中

因此,从 stackblitz 代码将变为:

<ng-select placeholder="Status" [closeOnSelect]="false">
        <ng-option [value]="'0'">Option 1</ng-option>
        <ng-option [value]="'1'">Option 2</ng-option>
        <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

在这里你可以找到文档https://github.com/ng-select/ng-select

#2楼 票数:0

ng-selectisOpen属性绑定到您的组件dropdown标志应该可以解决问题:

<ng-select placeholder="Status" [isOpen]="dropdown">
    <ng-option [value]="'0'">Option 1</ng-option>
    <ng-option [value]="'1'">Option 2</ng-option>
    <ng-option [value]="'2'">Option 3</ng-option>
</ng-select>

组件.ts

export class AppComponent  {
  dropdown = false;

  @ViewChild('father', {static: false}) father;
  @HostListener('document:click', ['$event'])
  public onClick(e) {
    const clickedInside = this.father.nativeElement.contains(e.target);
    if (!clickedInside) {
      this.dropdown = false;
    }else{
      this.dropdown=true;
    }
  }
}

看看https://github.com/ng-select/ng-select#inputs

我已经改变了你的堆栈闪电战

  ask by Davide Quaglio translate from so

未解决问题?本站智能推荐:

2回复

绑定到ng-select的条件选项

我有一个父组件,我们有一个ng-select组件,其中有10个选项,我将它们从父组件传递给ng-select。 我也有一个复选框。 我的目标是在选中复选框时仅传递1个选项。 当我选择了选择框时,是否有可能重复默认选择框的行为?我单击复选框,它会根据我的if条件自动选择唯一的选项。 这
2回复

ng-select:添加一个额外的选项

如何在我的 ng-select 下拉列表中添加一个额外的项目, Create New in the following image “ Create New in the following image : 这是我目前的代码:<ng-select [multiple]="true"
2回复

通过链接Ng-Select筛选数据

我有一个州列表(美国州)和需要过滤和显示值的县。 为了简单起见,我认为链接ng-selects将是最简单的UI。 但是,在第二次ng-select中加载所选州的各个县时遇到了麻烦。 我要去哪里走? 提前致谢.. 模板: 清单:
1回复

搜索事件未在@ng-select/ng-select中触发

是我的代码。 但奇怪的是,除了搜索事件之外,所有输出事件(如模糊等)都会被触发。 作为一种解决方法,我使用(keyup)事件来触发相同的事件。 我是否有任何错误不触发搜索事件。
3回复

ng-select未在Angular2中更新

你好,我是 angular 2 的新手我可以在 ng-select 控件中添加 formGroup 并预定义添加值。 那是完美的。 但是当按钮单击然后新值推送 ng-select 但 ng-select not updates 。 这是我的笨蛋 https://plnkr.co/edit/Hwfk1
1回复

:MouseEvent.target.select()在触发element.nativeElement.click()时不起作用

我不明白为什么使用 mouseclick 事件ng-select下拉输入文本被选中,但在执行此操作时this.elementRef.nativeElement.click()没有获取选定的输入文本。( ) 1.工作一 2.不工作 点击事件方法: 任何帮助。 谢谢。
1回复

更改表单组控件值后仍为空,如果以编程方式提供searchTerm

我需要以编程方式设置 searchTerm 值(使用虚拟键盘)并搜索下拉列表应显示基于 searchterm 的选项。 其中表单控件是 updateOn:'blur'。 但是在这里我面临的问题是,在根据虚拟输入键提供的searchTerm选择下拉选项后,表单控件没有得到更新(例如, stackbli
2回复

想要以角度6访问ng-select中的输入元素以获取其值

我正在处理一个项目,我想在 ng-select 中创建一个自定义功能,以便在 ng-select 中输入文本时,它将其附加到绑定项并将其添加为多选。 http://embed.plnkr.co/GLuyC0jpIdiEXB6R4FIa/preview 这是 angular 6 中所需的确切实现我正