【问题标题】:Implementing ng2-completer实现 ng2-completer
【发布时间】:2017-02-19 20:55:37
【问题描述】:

我目前正在将 ng2-completer (https://github.com/oferh/ng2-completer) 用于 angular 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");

}
 }

但它显示以下错误:

无法绑定到“selected”,因为它不是“ng2-completer”的已知属性。

【问题讨论】:

    标签: angularjs autocomplete


    【解决方案1】:

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

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

    【讨论】:

    • 我在模态弹出窗口中有ng2-completer。如何在其中添加[autofocus]="true"?因为autofocus 仅处理组件加载。如果我一次又一次地打开模态,如果我将它与模态一起使用,它就不起作用。
    • ng2-completer 有一个 focus 方法,你可以在这里看到:github.com/oferh/ng2-completer/blob/…
    • @OferHerman 我正在努力使用 ng2-completer。你能看看我的问题吗?我将不胜感激stackoverflow.com/questions/60011982/…
    猜你喜欢
    • 2017-10-04
    • 1970-01-01
    • 2018-09-28
    • 2019-01-19
    • 2018-08-12
    • 2019-03-07
    • 2020-05-21
    • 2017-04-15
    • 1970-01-01
    相关资源
    最近更新 更多