如何在typehaead Angular 4中使用limitTo?

时间:2018-02-11 04:33:56

标签: javascript angular typeahead

如何将Typeahead结果的数量限制为5或Angular 4中的某些内容? 我在这里附上官方的plunker链接。我无法使用|limitTo

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

这是模板

<section class="col-sm-12">
    <div class="search-results style-3">
      <input type="text" [value]="query"
        ngxTypeahead
        [taUrl]="url"
        [taParams]="params"
        (taSelected)="handleResultSelected($event)"
      >
    </div>
  </section>

这是ts文件

export class AppComponent {

  title = 'This is Angular TypeAhead v' + systemConfig.map['ngx-typeahead'].split('@')[1].split('/')[0];

  public url = 'http://suggestqueries.google.com/complete/search';
  public params = {
    hl: 'en',
    ds: 'yt',
    xhr: 't',
    client: 'youtube'
  };
  public query = '';

  handleResultSelected (result) {
    this.query = result;
  }

  generateWord() {
    return chance.word();
  }
}

1 个答案:

答案 0 :(得分:8)

在Angular中,没有limitTo过滤器,称为SlicePipe

使用| slice:0:3代替limitTo

<input type="text" ngxTypeahead [value]="query3" [taList]="staticList | slice:0:3" (taSelected)="handleStaticResultSelected($event)">

更新了plnkr:https://plnkr.co/edit/wqTHY2rHknXHF412BELQ?p=preview