Событие, выбранное с помощью ng2, не вызвано щелчком мыши - PullRequest
Новая
       3

Событие, выбранное с помощью ng2, не вызвано щелчком мыши

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

Как показывает вопрос, у меня есть проблема с применением события selected для ng2-completer.

Это также кажется открытой проблемой с ng2-completer, потому что они не выпустил ни одного исправления для этой проблемы на Github . Однако пока нет обходного решения.

Вот код, который я использую.

HTML шаблон: 

<ng2-completer 
   [(ngModel)]="searchStr"
   [datasource]="items"
   [minSearchLength]="0"
   [openOnFocus]="true"
   [placeholder]="'Please enter'"
   [textNoResults]="false"
   [maxChars]="6"
   (keyup)="onKeyDown($event)"
   (selected)="onItemSelect($event)"
   (blur)="onTouched()">
</ng2-completer>

Компонент: 

onItemSelect(selected: CompleterItem): void {
   console.log('selected item');
   console.log(selected);
}

Он ничего не печатает, когда я щелкаю или дважды щелкаю по любому элементу. Я также попытался набрать Enter, но это также не работает. Пожалуйста, помогите предложить решение этой проблемы, если у вас есть. Заранее спасибо.

Ответы [ 2 ]

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

Поскольку ng2-завершитель реализовал ControlValueAccessor внутри, вы можете использовать источник событий ngModelChange, чтобы получить испущенное значение.

Попробуйте это: 

<ng2-completer 
    [(ngModel)]="searchStr"
    [datasource]="items"
    [minSearchLength]="0"
    [openOnFocus]="true"
    [placeholder]="'Please enter'"
    [textNoResults]="false"
    [maxChars]="6"
    (ngModelChange)="onItemSelect($event)" >
</ng2-completer>
0 голосов
/ 19 марта 2020

ОБНОВЛЕНИЕ:

Хотя ответ Челлаппана работает, но он не подходит, если вы хотите передать выбранное событие в другой компонент. Вы можете видеть, что из-за (ngModelChange), onItemSelect будет срабатывать при каждом изменении searchStr, а с ng2-completer вы можете изменить [(ngModel)], наведя курсор на элемент из выпадающего списка. Это очень раздражает, потому что нет никакого свойства, чтобы отключить его.

Другое решение - переопределить событие click для каждого .completer-row.

. Файл html может выглядеть примерно так 

<div class="applicant-search-field" #autoComplete>
    <ng2-completer 
        ngDefaultControl
        [(ngModel)]="searchValue"
        [datasource]="dataSource"
        [minSearchLength]="minSearchLength"
        [maxChars]="33"
        [placeholder]="placeHolder"
        (keyup)="onKeyUp($event)">
    </ng2-completer>
 </div>

и прослушайте key event, чтобы переопределить прослушиватель событий click (поскольку раскрывающийся список будет отображаться только в том случае, если вы вводите что-то для поиска). 

@ViewChild('autoComplete', { static: false }) child: ElementRef;
onKeyUp(event: any): void {
    this.overrideNg2CompleterOnSelected();

    this.hasValue = this.searchValue.length > 0;
    this.valueBeforeHoverOnItem = this.searchValue;
    if (event.key === 'Enter') {
        this.autocompleteEventNotifier.emitData(this.searchValue);
    }
}

private overrideNg2CompleterOnSelected(): void {
    // we have to do this manually because (selected) event of ng2-completer is broken.
    const dropDownRows = this.child.nativeElement.querySelectorAll('.completer-row') as HTMLElement[];
    if (dropDownRows !== null) {
        for (const row of dropDownRows) {
            row.addEventListener('click', this.onItemSelect.bind(this));
        }
    }
}

Это просто обходной путь, я до сих пор не Если вы не хотите применять его, если выпадающий список содержит много элементов, мы можем столкнуться с проблемой производительности.

...