ngx-bootstrap typeahead 不显示下拉菜单

Question

我正在将一个应用程序从 AngularJS 迁移到 Angular，并且我在使用 typeahead 的新实现时遇到了障碍，现在已经有一天了，我尝试了几个 API，最终决定选择最类似于我在 AngularJS 版本中使用的 (this)

所以，在我的模板中我是这样做的：（你也可以在底部找到 pluker 链接）

<input [(ngModel)]="publication"
       [typeahead]="publications"
       typeaheadOptionField="name"
       typeaheadOptionsLimit="25"
       placeholder="Type it"
       class="form-control">

针对这个component.ts：

  import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Rx';
import { JhiEventManager, JhiParseLinks, JhiPaginationUtil, JhiAlertService } from 'ng-jhipster';
import { FormService } from './form.service';
import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../shared';
import { PaginationConfig } from '../blocks/config/uib-pagination.config';
import {FormDTO} from './formDTO.model';


@Component({
    selector: 'jhi-form',
    templateUrl: './uploadData.html'
})

export class FormComponent implements OnInit, OnDestroy {

    publication: String;
    public publications: any[] = [ {id: 1, name: 'this'}, {id: 2, name: 'is'}, {id: 21, name: 'list'}, {id: 4, name: 'of'}, {id: 5, name: 'string'}, {id: 6, name: 'element'}]

  /* in my app I hold a number of variables, cutted them out as irrelevant to issue */

    constructor(
        private alertService: JhiAlertService,
        private formService: FormService,
        private eventManager: JhiEventManager
/*here I put in a number of entities that query the backend, cutted them out for this example as they're irrelevant*/
    ) {
    }

    ngOnInit() {
        this.loadAll();
        this.registerChangeInForm();
    }

    ngOnDestroy() {
        this.eventManager.destroy(this.eventSubscriber);
    }

    loadAll() {
        this.isSaving = false;
        /* loads a number of list for entities, irrelevant code for the question */
    }

    save() {
        console.log('save');
    }



    search(id) {
        this.formService.find(id).subscribe(
            (result) => (this.formDTO = result, this.formDTOLoaded = true),
            (error) => (alert('Publication with Id:' + id + ' was not found in Database'), this.formDTOLoaded = false));
        this.loadAll();

    }

    registerChangeInForm() {
        this.eventSubscriber = this.eventManager.subscribe('formListModification', (response) => this.loadAll());
    }

    trackPublicationTypeById(index: number, item: PublicationType) {
        return item.id;
    }

    private onError(error) {
        this.alertService.error(error.message, null, null);
    }

}

还有module.ts：

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DrugQualityDataManagerSharedModule } from '../shared';
import {formRoute} from './form.route';
import {FormComponent} from './form.component';
import {FormService} from './form.service';
import { NguiAutoCompleteModule } from '@ngui/auto-complete';
import { TypeaheadModule } from '../../../../../node_modules/ngx-bootstrap/typeahead';
import { FormsModule } from '@angular/forms';

 const ENTITY_STATES = [
     ...formRoute,
 ];

@NgModule({
    imports: [
        DrugQualityDataManagerSharedModule,
        FormsModule,
        TypeaheadModule.forRoot(),
        RouterModule.forRoot(ENTITY_STATES, { useHash: true })
    ],
    declarations: [
        FormComponent,
    ],
    entryComponents: [
        FormComponent,
    ],
    providers: [
        FormService,
     ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DrugQualityDataManagerFormModule {}

publications 数组是一个简化的数组，我创建它是为了测试预输入，它应该只显示具有 name 属性的对象列表与在输入框中键入的内容最相似，但它绝对没有任何作用。

在 Web Developer 工具上进行调试时，我可以看到当我在框中键入时触发 ng-blur 选项，但那里没有任何反应

控制台没有错误，占位符显示正常，直到我开始输入，这是预期的行为

我希望有人帮我解决这个难题，但如果有人也能指出如何调试这样的问题，那就太好了？

编辑：添加plunker

Answer 1

确保您的 Angular 版本和 Bootstrap 版本兼容。它发生在我使用 Angular 4 和 ng2-bootstrap 1.6.x 时。 更好的是，您应该使用 ngx-bootstrap 而不是 ng2-bootstrap。要使下拉菜单正常工作，请添加容器属性：

<div class="btn-group" dropdown  container="body"></div>

Answer 2

首先

import { TypeaheadModule } from '../../../../../node_modules/ngx-bootstrap/typeahead';

应该是：

import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

不绑定[]，options limit会被设置成字符串typeaheadOptionsLimit="25"，所以应该是[typeaheadOptionsLimit]="25"

我什至没有看到附加了预输入 :( 删除这个：schemas: [CUSTOM_ELEMENTS_SCHEMA] 很可能你会看到typeahead is unknown property 的错误

然后尝试删除所有选项并从示例中应用它们：

https://valor-software.com/ngx-bootstrap/#/typeahead#static

你应该得到这样的结果：

https://valor-software.com/ngx-bootstrap/#/typeahead#async