Ngb Typehead结果与部分

Question

我想自定义ngb typeahead dropdown。到目前为止，我们已经成功创建this。当我尝试在模板中呈现我的列表时，它会将小节呈现为一项，恰好也添加了一个新的小节按钮。我想实现类似下图的效果。

Answer 1

您总是可以添加一个“傻瓜”元素，并使用ng-container赋予不同的外观。或多或少像your forked stackblitz

在搜索中，我们添加了一个元素

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>