angularjs - 我们如何限制 Angular Material 中自动完成显示的建议数量

Question

我正在使用 Angular Material 自动完成功能来根据用户输入显示建议。作为用户类型，我进行 API 调用并显示要显示的数据。现在在某些情况下，结果数量巨大，比如 500-1000，因此 DOM 停止响应。

我正在寻找一种方法，可以将这些建议限制为某些特定值，然后增加它们(比如滚动)。

我检查了我是否可以像使用 ng-repeat 一样使用 limitTo，但它没有用。用 ng-repeat 替换 md-items 也没有用。

我四处搜索并找到了这个 https://github.com/angular/material/issues/1917 ，尽管这似乎没有用。

谁能提出实现这一目标的方法。

我的 HTML:

<md-autocomplete class="flex corridor_popup_autocomplete" md-no-cache="true" md-selected-item="corridor.delivery" md-item-text="item.name" md-search-text="deliverySearchText" md-items="item in querySearch(deliverySearchText)" md-floating-label="Delivery location search">
    <md-item-template>
        <span><span class="search-result-type">{{item.type}}</span><span md-highlight-text="deliverySearchText">{{item.name}}{{item.code?' ('+ item.code +')':''}}</span></span>
    </md-item-template> <md-not-found>No matches found. </md-not-found>
</md-autocomplete>

Answer 1

我花了很多时间为显示太多结果的自动完成列表寻找解决方案。似乎没有解决方案。

但是，我通过使用 Angular 的 SlicePipe ( https://angular.io/api/common/SlicePipe ) 解决了这个问题。这限制了显示的建议数量。这足以满足我的目的。

<mat-option *ngFor="let option of filteredOptions | async | slice : 0 : 10"
[value]="option.name" (click)="displayImage($event, option)">
<small>{{ option.name }}</small>
</mat-option>