如何在 typeahead Angular 4 中使用 limitTo？ [复制]答案

【问题标题】：How to use limitTo in typehaead Angular 4? [duplicate]如何在 typeahead Angular 4 中使用 limitTo？ [复制]
【发布时间】：2018-02-11 04:33:55
【问题描述】：

如何将预先输入结果的数量限制为 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();
  }
}

【问题讨论】：

@sajeetharan 之前在哪里问过？您可以发送重复的问题吗？

标签： javascript angular typeahead

【解决方案1】：

在 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

【讨论】：