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

【问题标题】：How can we limit the number of suggestions displayed by auto-complete in Angular Material我们如何限制Angular Material中自动完成显示的建议数量
【发布时间】：2019-09-06 20:05:42
【问题描述】：

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

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

我检查了是否可以像使用 ng-repeat 一样使用 limitTo，但它不起作用。将md-items 替换为ng-repeat 也不起作用。

我搜索了一下，发现了这个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>

【问题讨论】：

你能发布html吗？有很多角度函数就是为了这个。
@Itsik 发布了我的 HTML，假设 md-autocomplete 很熟悉

标签： angularjs angular-material

【解决方案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>

【讨论】：

【解决方案2】：

您可以在数组结果中使用slice(0,20)：

function querySearch(){
    var results = query ? $scope.enqueteurs.filter(createFilterFor(query, 'enqueteurs')) : $scope.enqueteurs, deferred;
    results = results.slice(0, 2);

    deferred = $q.defer();
    deferred.resolve(results);

    return deferred.promise;
}

【讨论】：