ngbTypeAhead从不显示建议

Question

我发现ng-boostrap对于我正在开发的应用程序有一种奇怪的行为。

我正在使用ng-bootstrap: 1.1.x Angular 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;

工作

调用后端并将信息存储在this.propertyResults数组中，然后用户继续搜索input字段中的内容，从而触发Typeahead search。

数据

来自服务器的

数据如下：

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

当前输出

ng-template未显示任何建议

注意：相反，当我按 Tab 键时，我会收到建议！那个怎么样？我有StackBlitz Example同样的东西，并且完美无缺。但是在应用程序中使用相同的代码我看不到建议。

这与卡内的布局有关吗？我需要建议模板才能显示，因为它对应用程序至关重要。

Answer 1

显然该组件适用于 Bootstrap 4.1.1 ，而我之前使用的版本是 Bootstap 4-alphav3 ，这可能会导致问题。