Question

我正在将一个应用程序从AngularJS迁移到Angular，并且我已经使用了针对typeahead的新实现打了一堵砖墙，现在已经过了一天，我已经尝试过几个API，最终决定选择与我在AngularJS版本中使用的最相似的那个（this）

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

<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：

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

出版物数组是一个简化版本，我创建它来测试typeahead，它应该只显示名称属性与输入框中输入的内容最相似的对象列表，但它绝对没有。

在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

ngx-bootstrap typeahead not not dropdown

2 个答案: