我发现 ng-boostrap 我正在开发的一个应用程序。

我正在使用 ng-bootstrap: 1.1.x 具有 角度5.2.x

component.html

有 bootstrap 4-alpha 卡。(布雷维蒂代码减少)

<div class="card-block">
                        <label for="typeahead-template"><span>Search</span></label>
                        <input id="typeahead-template"
                               type="text"
                               class="form-control"
                               [(ngModel)]="searchModel"
                               [ngbTypeahead]="search"
                               [resultTemplate]="rt"
                               [inputFormatter]="formatter"
                        >
                        <ng-template #rt let-r="result" let-t="term">
                            {{ r.translatedProperty}}
                        </ng-template>
                    <select size="10" class="form-control mr-4">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="let eachVal of objResults">
                                {{eachVal.translatedProperty}}
                            </option>
                        </optgroup>
                    </select>
</div>

输出如下所示:

component.ts

this.propertyResults 是类型为的空数组 any 定义为 public 存储服务器响应的位置。

 // Autocompletion Implementation from NG-BOOTSTRAP
    public search = (text$: Observable<string>) =>
        text$.pipe(
            debounceTime(200),
            map((term: string) => term === '' ? []
                : this.propertyResults.filter(v => v.translatedProperty.toLowerCase()
                    .indexOf(term.toLowerCase()) > -1).slice(0, 10))
    );
    public formatter = (x: {translatedProperty: string}) => x.translatedProperty;

工作

调用后端并将信息存储在 本.propertyresults 数组,然后用户继续搜索 input 场,因此触发 search 对于前面的字体。

数据

来自服务器的数据如下:

[
  {
    "propertyURL": "http://semanticweb.org/blahblah",
    "datatypeProperty": true,
    "objectProperty": false,
    "translatedProperty": "AverageDeliveryTimeInDays"
  },
  .. so on
]

电流输出

没有显示来自的建议 ng-template

注释 :相反,当我按下 标签 我把建议填好了!怎么样?我有一个 StackBlitz Example 同样,也有完美的作品。但在应用程序中使用相同的代码时,我看不到建议。

这和卡里面的布局有关系吗?我需要显示建议模板,因为它对应用程序至关重要。