实施ng2-completer

时间:2017-02-12 11:21:23

标签: angularjs autocomplete

我目前正在使用ng2-completer(https://github.com/oferh/ng2-completer)作为角度2,并努力添加建议以获得完整响应,而不是只有一个值。

此外,当选择建议时,如何指定方法来处理此问题?

我到目前为止的代码是:

import { Component } from '@angular/core';
import { AutoComplete } from './autocomplete';
import { CompleterService, CompleterData, RemoteData } from 'ng2-completer';
import { SearchComponent } from './search.component';
import { QueryService } from './query.service';


@Component({
  selector: 'app-home',
  template: `<ng2-completer [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0" [inputClass]="['form-control input-list']" [autofocus]="['true']" [selected]="selected()"></ng2-completer>`,
  //directives: [ AutoComplete ]
})

export class HomeComponent {

  public searchStr: string;
  private dataService: CompleterData;

  constructor(private completerService: CompleterService, private queryService: QueryService) {
    //this.dataService = completerService.local(this.searchData, 'color', 'color');
    this.dataService = completerService.remote('http://localhost:61227/machine/?query=','ComputerHostname, AssetID', 'ComputerHostname').descriptionField('ComputerType');

//this.dataService = this.queryService.search(searchStr).then(items => this.items = items);  

}

selected () {

console.log("test");

}
 }

但是它显示以下错误:

无法绑定到选定的&#39;因为它不是'ng2-completer&#39;的已知属性。

1 个答案:

答案 0 :(得分:1)

selected是一个事件,而不是一个属性,因此它的语法(如Angular template syntax中所述)应为(selected)="selected($event)"

autofocus期望布尔值(see in ng2-completer doc)不是数组,因此您应该使用[autofocus]="true"