Question

尝试使用angular js

实现自动建议

 $ npm install ng2-auto-complete --save

将地图和包添加到systemjs.config.js

 map['ng2-auto-complete'] = 'node_modules/ng2-auto-complete/dist';
 packages['ng2-auto-complete'] = { main: 'ng2-auto-complete.umd.js', ...]

添加了组件

 @Component({
    selector: 'person',
    templateUrl: 'app/person/person.component.html'
})
personalData(personName: String): Observable<DepartmentModel[]>{
        let headers = new Headers();        
            if(personName!= undefined){

                headers.append('Content-Type','application/json');
                headers.append('Access-Control-Allow-Origin', '*');
             return this.http.post(AppUtils.GET__MASTER_URL //return a list of department
             ,{personName:personName}
             ,{headers:headers})
                            .map(response => response.json())
                            .catch(this.handleError);
            }


    }

在person.component.html中添加了标记

<input auto-complete [(ngModel)]="myData"  [source]="personalData('test')" />

它在循环中调用服务..浏览器被绞死。

使用了这个：https://github.com/ng2-ui/auto-complete

Answer 1

绑定到类似

的方法

personalData('test')

导致更改检测在每个更改检测周期调用personalData('test')。

解决这个问题的常用方法是将ngOnInit() { this.personalData('test').subscribe(val => this.pd = val); }的结果分配给属性并改为绑定到该属性。

[source]="pd"

然后使用

{{1}}

Answer 2

根据文档

source, array or string, required. data source for dropdown list

您正在使用方法填充来源personalData('test')

因此，对于每个DOM更新服务都将进行调用。

Answer 3

您可以在(ngModelChange)="search1($event)"上触发服务调用，然后调用该服务并获取数据并将其绑定到[source]="data"，其中数据中包含从上次搜索中接收到的数据。

ANgular2自动建议服务器调用进入无限循环

3 个答案: