Angular 5 使用 ng-select 作为自动完成字段

Question

在我的应用程序中选择...。是否可以将其用作自动完成字段，不需要选择值。我想使用 ng-select，因为它使用虚拟滚动，而 Angular Material 的 mat-autocomplete 则没有。如果有很多值，mat-autocomplete 会变慢。

我的问题:是否可以将 ng-select 用作​​自动完成功能。换句话说:ng-select 没有所需的选择选项。如果我点击远离 ng-select 字段，如果没有选择，该值将为空。值(value)必须保留..

<label>Your first ng-select</label>
      <ng-select class="custom" [items]="cities"
                bindLabel="name"
                placeholder="Select city"
                [typeahead]="typeahead"
                [(ngModel)]="selectedCity">
      </ng-select>

Answer 1

我相信你正在使用

https://www.npmjs.com/package/@ng-select/ng-select#api

不建议以这种方式使用它，但是有变通办法。

添加以下监听器

(open)= OnOpen(), (search) = OnSearch(), (blur) = OnBlue()

<ng-select [items]="cities" #select1
                   bindLabel="name"
                   (open)= OnOpen()
                   (search) = OnSearch()
                   (blur) = OnBlue()
                   dropdownPosition="hidden"
                   [(ngModel)]="selectedCity">
        </ng-select>

添加定义这两个变量

isbeingSearched: boolean = false;
@ViewChild('select1') select1Comp: NgSelectComponent;

//处理事件的代码

OnOpen(){
  console.log("OnOpen");
  if(!this.isbeingSearched)
  {
    this.select1Comp.close()      
  }

}

OnSearch(){
  this.isbeingSearched = true;
  console.log("OnSearch");
  this.select1Comp.open()
}

OnBlue(){
  console.log("OnBlue");
  this.isbeingSearched = false;
  this.select1Comp.close()
}

工作示例

https://stackblitz.com/edit/ng-select-lw4dfh