Проблема с раскрывающимся меню автозаполнения с помощью ng-select - PullRequest
Новая
       7

Проблема с раскрывающимся меню автозаполнения с помощью ng-select

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

Я пытаюсь создать выпадающее меню, которое автоматически закрывается, когда пользователь щелкает за его пределами. В этом меню я добавил компонент ng-select , но когда я нажимаю на одну из опций, меню закрывается, потому что раскрывающаяся панель ng-select не находится внутри DOM, когда она закрыта Есть ли способ достичь того, что я хочу? Раскрывающееся меню не закрывается, когда пользователь выбирает параметр ng? Вот пример проблемы: 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 Я только что добавил новую переменную, которая изменилась с таймаутом в 500 мс после закрытия ng-select, таким образом, в течение 500 мс после выбора опции ng, раскрывающийся список не может быть закрыт.

Ответы [ 2 ]

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

привязка isOpen свойства ng-select к вашим компонентам 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>

component.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

Я изменил ваш яркость стека

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

Атрибут [closeOnSelect]="false" должен сделать эту работу. Вам нужно будет добавить его к тегу <ng-select>

Итак, из стекаблиц код станет: 

<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

...