Angular Bootstrap 多个 typeahead 组件轻弹

Question

我正在使用bootstrap angular 打字机。对于单次使用，它工作正常，但是当我尝试再创建一个时，它正在轻弹另一个打字头下拉菜单。如截图所示，我选择专注于国家和国籍的下拉菜单突然打开和关闭。反之亦然。

.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

我们需要创建不同的点击和焦点对象。

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

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

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

解决了。