2

正如问题所暗示的那样，我在将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 但它也不起作用。如果您有，请帮助建议解决此问题的解决方案。先感谢您。

4

2 回答 2

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>
于 2020-02-05T08:23:25.987 回答
0

更新：

即使 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));
        }
    }
}

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

于 2020-03-19T06:15:52.397 回答