提前角输入* ng对于输入,focus()和click()问题

时间:2019-02-03 10:37:46

标签: angular typescript typeahead

我使用Angular的Typeahead函数处理Angular Project。我正在做这样的事情:在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功能预输入:

  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事先键入的内容给我的类别列表,但问题是下一:当我试图添加类别的几个领域,并点击其中一个,每场给我的预输入选项,就像在照片上一样。有什么想法吗?

enter image description here

0 个答案:

没有答案