ngbTypeahead с директивой * ngFor - PullRequest
Новая
       28

ngbTypeahead с директивой * ngFor

0 голосов
/ 20 июня 2019

У меня есть одно поле ввода внутри * ngFor, которое будет выполнено 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))
    );
  }
}
...