Angular Bootstrap multiple typehead组件轻击

Question

我正在使用bootstrap angular typehead。对于单次使用，它工作得很好，但当我试图再创建一个时，它会弹出另一个typehead下拉列表。如截图所示，我选择了聚焦于国家和国籍的下拉列表突然打开和关闭。反之亦然。

​

​

.ts代码。

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

const country = ["United States", "China", "Japan", "Germany", ]
const nationality = ['American', 'Indian', 'Japanese', 'Chinese','Spanish'];

@Component({
  selector: 'app-accommodation',
  templateUrl: './accommodation.component.html',
  styleUrls: ['./accommodation.component.css']
})
export class AccommodationComponent {


  model: any;
  model1: any;

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

  searchCountry = (text$: Observable<string>) =>
    text$
      .debounceTime(200).distinctUntilChanged()
      .merge(this.focus$)
      .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
      .map(term => (term === '' ? country : country.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));

  searchNationality = (text$: Observable<string>) =>
    text$
      .debounceTime(200).distinctUntilChanged()
      .merge(this.focus$)
      .merge(this.click$.filter(() => !this.instance.isPopupOpen()))
      .map(term => (term === '' ? nationality : nationality.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10));


}

html代码

    <div class="col-sm-6">
        <div class="form-group">
            <input placeholder="Country" 
              id="countrySearch"
              type="text"
              name="country" 
              class="form-control"
              [(ngModel)]="model"
              [ngbTypeahead]="searchCountry"
              (focus)="focus$.next($event.target.value)"
              (click)="click$.next($event.target.value)"
              #instance="ngbTypeahead"
            />              

        </div>
    </div>
    <!-- col end -->
    <div class="col-sm-6">
        <div class="form-group">

        <input placeholder="Nationality" 
          id="nationalitySearch"
          type="text"
          name="Nationality" 
          class="form-control"
          [(ngModel)]="model1"
          [ngbTypeahead]="searchNationality"
          (focus)="focus$.next($event.target.value)"
          (click)="click$.next($event.target.value)"
          #instance="ngbTypeahead"
        />                  

        </div>
    </div>
    <!-- col end -->

我在代码中做错了什么？我创建了两个模型，并添加了不同的id。它仍然在闪动

Answer 1

我们需要创建不同的click和focus对象。

  focus$ = new Subject<string>();
  click$ = new Subject<string>();

  focus1$ = new Subject<string>();
  click1$ = new Subject<string>();      

  focus2$ = new Subject<string>();
  click2$ = new Subject<string>();   

问题解决了。