带有* ngFor指令的ngbTypeahead

Question

我在* ng内有一个输入字段，它将执行4次。 当我单击输入字段之一时，所有四个输入字段的ngbTypeahead建议都会打开。

这是我的代码：

.html

<div *ngFor="let number of [0,1,2,3,4];let i=index">
  <label for="typeahead-focus">Search for a state:</label>
<input type="text"
                                        class="form-control border-bottom  chBd border-top-0 border-right-0 border-left-0"
                                        aria-label="Amount (to the nearest dollar)"  
                                        [ngbTypeahead]="search"
                                        (focus)="focus$.next($event.target.value)"
                                        (click)="click$.next($event.target.value)"
                                        #instance="ngbTypeahead"
                                        />
</div>

.ts

import {Component, ViewChild, QueryList, ViewChildren} from '@angular/core';
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Observable, Subject, merge} from 'rxjs';
import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';

const states = ['Alabama', 'Alaska'];

@Component({
  selector: 'ngbd-typeahead-focus',
  templateUrl: './typeahead-focus.html',
  styles: [`.form-control { width: 300px; }`]
})
export class NgbdTypeaheadFocus {
  model: any;

  @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))
    );
  }
}