包含部分的Ngb Typehead结果

Question

我想自定义ngb typeahead dropdown.so远管理创建this .when我尝试在模板中呈现我的列表，它将子部分渲染为一个项目，恰好添加了一个新的部分按钮。我想实现如下图所示的效果。

​

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>