NG2-鼠标单击未触发完成所选事件

Question

正如问题所暗示的，我在将selected事件应用于ng2-completer时遇到了问题。

这似乎也是ng2-completer的一个悬而未决的问题，因为他们还没有发布任何针对关于吉突布的这个问题的修补程序。然而，目前还没有解决办法。

这是我使用的代码。

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，但它也不起作用。如果您有此问题，请帮助提出解决方案的建议。提前谢谢你。

Answer 1

由于ng2-completer在内部实现了ControlValueAccessor，所以可以使用ngModelChange事件发射器获得发出的值。

尝试如下：

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

Answer 2

更新：

即使Chellappan的答案有效，但如果您想将所选事件传递给其他组件，则它将不合适。您可以看到，由于(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));
        }
    }
}

这只是一个解决办法，我仍然不想应用这个，如果下拉列表包含很多项，我们可能会遇到性能问题。