ngx-bootstrap typeahead不显示下拉列表 [英] ngx-bootstrap typeahead not showing dropdown

问题描述

我正在将应用程序从AngularJS迁移到Angular，并且为新的实现类型遇到了麻烦，距今天已经有一天了，我尝试了几种API，最后决定尝试最多的方法与我在AngularJS版本中使用的类似(此)

I'm migrating an application from AngularJS to Angular and I've hit a brick wall with the new implementation for typeahead, it's been a day now since and I've tried with several API, finally decided to go for the most similar one to what I was using in AngularJS version (this)

因此，在我的模板中，我这样做:(您也可以在底部找到pluker链接)

So, in my template I do this: (you can also find pluker link at the bottom)

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

针对此组件.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:

And the 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 {}

出版物的数组是一个简化的出版物，我创建了它来测试预输入，它应该只显示具有name属性与输入框中所输入内容最相似的对象列表，但它绝对不执行任何操作.

The array of publications is a simplified one, I created it to test the typeahead, which should just display the list of objects that have the name property most similar to what's being typed in the input box, but it does absolutely nothing.

在Web Developer工具上进行调试时，我可以看到在输入框中输入ng-blur选项会触发，但是在那里什么也没发生

When debugging on the Web Developer tools I can see the ng-blur options triggering when I type in the box, but nothing happens from there

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

The console is clean of errors and the placeholder displays fine until I start typing, which is the expected behaviour

我希望有人能帮助我解决这个难题，但是如果有人还能指出如何调试这样的问题，那将真的很棒！

I would like someone to help me solve this puzzle, but it would be really awesome if someone could also point out how to debug an issue like this?

编辑:添加朋克车

推荐答案

确保Angular和Bootstrap的版本兼容.当我在ng2-bootstrap 1.6.x中使用Angular 4时发生了这种情况.更好的是，您应该使用ngx-bootstrap而不是ng2-bootstrap.要使下拉菜单正常工作，请添加container属性:

Make sure that your versions of Angular and that of Bootstrap are compatible. It happened when I was using Angular 4 with ng2-bootstrap 1.6.x. Better yet, instead of ng2-bootstrap you should be using ngx-bootstrap. To get the dropdown working, add the container attribute:

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

这篇关于ngx-bootstrap typeahead不显示下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！