Ngb Typehead результат с разделами - PullRequest
Новая
       58

Ngb Typehead результат с разделами

0 голосов
/ 01 октября 2019

Я хочу настроить ngb typeahead dropdown.so до сих пор удалось создать this . Когда я пытаюсь отобразить мой список в шаблоне, он отображает подраздел как один элемент, который также добавляет кнопку нового раздела. Я хочу добиться чего-то вроде изображения ниже. enter image description here

1 Ответ

0 голосов
/ 01 октября 2019

Вы всегда можете добавить элемент «дурак» и использовать ng-container, чтобы придать другой вид. Более или менее как ваш разветвленный стек

В поиске мы добавляем элемент 

search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(
        //see that I change the filter adding this.instance &&
        filter(() => this.instance && !this.instance.isPopupOpen()));
    const inputFocus$ = this.focus$;

    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map((term: string) => (term === '' ? category
        : category.filter(v => v.categoryName.toLowerCase().indexOf(term.toLowerCase()) > -1))
        .slice(0, 10) //add a new value with categoryId=0
        .concat([{categoryId: 0,categoryName: "Add",subCategoriesList:[]}]))
    );
  }

И шаблон как 

<ng-template #rt let-r="result" let-t="term">
    <ng-container *ngIf="r.categoryId">
        <li style="color:green">{{r.categoryName}}</li>
        <li *ngFor="let item of r['subCategoriesList']">
            {{item}}
        </li>
    </ng-container>
    <ng-container *ngIf="r.categoryId==0">
         <li><button class="btn">Add</button></li>
  </ng-container>
</ng-template>
...