Angular Typeahead * ngДля ввода, проблемы focus () и click () - PullRequest
Новая
       9

Angular Typeahead * ngДля ввода, проблемы focus () и click ()

0 голосов
/ 03 февраля 2019

Я работаю над Angular Project, используя функцию Angular Typeahead.Я делаю такую ​​вещь: в html я зацикливаю входы с * ngFor вот так: 

<div class="form-group" formArrayName="categories">
<label for="category reg-color" class="col-12 pl-0">{{'app.categories' | trans}}:</label>
<div *ngFor="let category of createCompanyForm.controls.companyData.controls.categories.controls; let i = index;" class="email-control input-group" [ngClass]="{'mt-0': i === 0}" [formGroupName]="i">
    <div class="input-group-prepend">
        <span class="input-group-text" id="username-addon">
            <i class="fas fa-list-alt"></i>
        </span>
    </div>
    <ng-template #rt let-r="result" let-t="term">
        <ngb-highlight class="dropdown-typeahead" [result]="r.name" [term]="model"></ngb-highlight>
    </ng-template>
    <input type="text" id="{{'categoriesSelect' + i}}" style="width: 70%; display: inline;" 
        formControlName="category_id"
        [ngbTypeahead]="searchCategory" 
        [inputFormatter]="formatter"
        [resultTemplate]="rt" 
        (selectItem)="chooseItem($event)" 
        (focus)="focus$.next($event.target.value)"
        (click)="click$.next($event.target.value)"
        placeholder="{{'app.search_word' | trans}}" 
        class="form-control font-extra category-class">
        <!-- <typeahead-categories></typeahead-categories> -->
    <div *ngIf="errSelectValueIsString(createCompanyForm.value.companyData.categories[i].category_id, i)" class="col-12 pl-0 pr-0 categoryIndustryErrText">შეიყვანეთ მნიშვნელობა და აირჩიეთ ცხრილიდან</div>
    <i class="fa fa-close" [ngClass]="{'bottomAlignClose': errSelectValueIsString(createCompanyForm.value.companyData.categories[i].category_id, i)}" *ngIf="createCompanyForm.controls.companyData.controls.categories.controls.length > 1" (click)="removeCategoryFromCompany(i)"></i>
</div>
<div>
    <span class="add-email" (click)="addNewCategoryToCompany()">{{'app.add_category' | trans}}:</span>
</div> </div>

Моя функция TS для typeahead: 

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

  searchCategory = (text$: Observable<string>) => {
      const debouncedText$ = text$.pipe(debounceTime(200), 
      distinctUntilChanged());
      const inputFocus$ = this.focus$;

      return merge(debouncedText$, inputFocus$).pipe(
          map(term => this.serviceCategories.typeaheadSearch(term))
  );
 }

Когда я нажимаю на Категории input Typeahead дает мне список категорий, но проблема заключается в следующем: Когда я пытаюсь добавить несколько полей категорий и щелкнуть по одному из них, каждое поле дает мне варианты typeahead, простокак на фото.Есть идеи?

enter image description here

...