ngx-bootstrap typeahead 不顯示下拉菜單

Question

我正在將一個應用程序從 AngularJS 遷移到 Angular 並且我已經用新的 typeahead 實現碰到了磚牆，從那以后已經過了一天，我已經嘗試了幾個 API，最后決定去尋找最相似的一個我在 AngularJS 版本中使用的是什么（這個）

所以，在我的模板中，我這樣做：（你也可以在底部找到 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);
    }

}

和模塊.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 {}

出版物數組是一個簡化的數組，我創建它是為了測試預先輸入，它應該只顯示名稱屬性與輸入框中鍵入的內容最相似的對象列表，但它絕對沒有任何作用。

在 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';

沒有綁定[] ，選項限制將被設置為字符串typeaheadOptionsLimit="25" ，所以它應該是[typeaheadOptionsLimit]="25"

我甚至不看到預輸入附着:(刪除此： schemas: [CUSTOM_ELEMENTS_SCHEMA]和最有可能你會看到一個錯誤， typeahead未知屬性

然后嘗試刪除所有選項並從示例中應用它們：

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

你應該得到這樣的結果：

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