我正在将一个应用程序从 AngularJS 迁移到 Angular，但我在新的 typeahead 实现上遇到了障碍，已经过去一天了，我尝试了几个 API，最后决定采用最相似的 API我在 AngularJS 版本中使用的是什么（this http://valor-software.com/ngx-bootstrap/#/typeahead)
因此，在我的模板中，我这样做：（您还可以在底部找到 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 {}
出版物数组是一个简化的数组，我创建它是为了测试预先输入，它应该只显示名称属性与输入框中键入的内容最相似的对象列表，但它绝对不执行任何操作。
在 Web Developer 工具上进行调试时，我可以看到在框中键入内容时触发 ng-blur 选项，但没有任何反应
控制台没有错误，占位符显示正常，直到我开始输入，这是预期的行为
我希望有人帮助我解决这个难题，但如果有人也能指出如何调试这样的问题，那就太棒了？
EDIT: to add plunker https://plnkr.co/edit/vInjG56elnZsMmIHzWOe?p=preview
