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