Javascript ng引导4-在焦点上打开前键入

我使用ng引导程序4（beta 8）。目前，我有以下几点：

<ng-template #rt let-r="result" let-t="term">
    {{ r.label }}
</ng-template>

<input
        id="typeahead-focus"
        class="form-control"
        [(ngModel)]="model"
        [ngbTypeahead]="search"
        [inputFormatter]="formatter"
        [resultTemplate]="rt"
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        #instance="ngbTypeahead"
/>

---

以下解决方案适合我：

将焦点事件添加到输入搜索中

my.html文件

 <input 
    (focus)="onFocus($event)" 
    type="text" 
    (selectItem)="onItemSelected($event)" 
    [(ngModel)]="myModel" 
    [ngbTypeahead]="search" 
    [resultTemplate]="rt" 
    [inputFormatter]="formatter"/>

my.ts文件

  public onFocus(e: Event): void {
    e.stopPropagation();
    setTimeout(() => {
      const inputEvent: Event = new Event('input');
      e.target.dispatchEvent(inputEvent);
    }, 0);
  }

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => this.myList
          .filter(v => this.myfilter(term))
          .slice(0, 10));

公共聚焦（e:事件）：无效{
e、 停止传播（）；
设置超时（（）=>{
常量输入事件：事件=新事件（“输入”）；
e、 target.dispatchEvent（inputEvent）；
}, 0);
}
搜索=（文本$：可观察）=>
正文$
.debounceTime（200）
.distinctUntilChanged（）
.map（term=>this.myList
.filter（v=>this.myfilter（术语））
.切片（0,10））；

还可以根据当前的情况查看一下

，您可以使用html：

<input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="model"  [ngbTypeahead]="search" (focus)="focus$.next($event.target.value)" (click)="click$.next($event.target.value)" #instance="ngbTypeahead"/>

和代码：

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? states
       : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
  );

@ViewChild（'instance'）实例：NgbTypeahead；
焦点$=新主题（）；
单击$=新建主题（）；
搜索=（文本$：可观察）=>{
const debouncedText$=text$.pipe（debounceTime（200），distinctUntilChanged（））；
const clicksWithClosedPopup$=this.click$.pipe（过滤器（（）=>！this.instance.isPopupOpen（））；
const inputFocus$=this.focus$；
返回合并（debouncedText$、inputFocus$、clicksWithClosedPopup$）。管道(
映射（术语=>（术语==''）状态
：states.filter（v=>v.toLowerCase（）.indexOf（term.toLowerCase（））>-1））.slice（0,10））
);

比创建所有这些主题、实例等要简单得多，谢谢！

  @ViewChild('instance') instance: NgbTypeahead;
  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

  return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
    map(term => (term === '' ? states
       : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
  );