通过单向绑定的过滤功能提高自定义角度下拉菜单中的角度性能

Increasing Angular Performance in Custom Angular Dropdown with Filtering Functionality with One Way Binding

本文关键字：自定义 下拉菜单 性能 功能 绑定 过滤      更新时间：2023-09-26

我有一个自定义的角度组件，它可以作为具有过滤功能的下拉选择元素。输入是具有几个角度指令的基本输入元素：

 <input type="text" class="form-control" ng-change="ctrl.filterTextChangeLocal($event)" ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)" />

上面的输入负责打开下拉列表并允许用户键入，因为用户键入时，下拉列表元素中的数据会相应地被过滤。滤波是在控制器中使用基本角度滤波器完成的：

 ctrl.filteredItems = ctrl.$filter("filter")(ctrl.items, ctrl.ngModelValue);

下拉元素如下所示：

 <table class="table">
        <thead>
            <tr>
                <th ng-repeat="heading in ctrl.gridColumnHeaders" class="text-center">{{heading}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in ctrl.filteredItems" ng-mousedown="ctrl.onSelectedLocal(row, $event)">
                <td ng-repeat="value in ctrl.sort(row) track by $index" class="text-center">
                    {{value}}
                </td>
            </tr>
        </tbody>
    </table>

所有操作都很好，但随着传递到组件中的项目数量的增加（100多个项目）和下拉列表的相应增加，过滤速度很慢。这意味着当我键入一个字符时，下拉列表的过滤会滞后。

我知道Angular过滤器不是性能最好的，但我相信大部分滞后来自ng重复和双向绑定。我不能在ng重复本身中创建单向绑定：

  ng-repeat="value in ::ctrl.filteredItems"

因为我失去了筛选的绑定。只需设置单向绑定即可提高性能：

  {{::value}}

或者提高性能的最佳方法是什么？真的需要尝试并停留在Angular框架中，所以寻找Angular解决方案。

感谢

您是否尝试过简单地应用：

one-time-binding="true"

直接在ng重复？

通常情况下，100多个元素的双向绑定不会影响性能-但是如果你的循环中有一个嵌套的循环，那么。。

相关文章：