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

Question

从我的应用程序中选择....是否可以将其用作自动完成字段，不需要选择值。我想使用ng-select，因为它使用虚拟滚动而角度材质的mat-autocomplete则不然。并且有很多值，mat-autocomplete变得很慢。

我的问题：是否可以将ng-select用作自动完成功能。换句话说：ng-select没有必需的选择选项。如果我点击ng-select字段，如果未选择任何内容，则该值将为空。价值必须保持..

<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