Question

我有一些Angular代码，我已经开始工作，但我不明白为什么 - 来自C Sharp背景和JS和Typescript的新手。

<tr ng-repeat="colleague in Model.FilteredColleagueListModel | filter:Model.searchText(Model.SearchCriteria)" >

    public searchText(searchCriteria)
    {

        return function (item) {
            if (item.DisplayName.indexOf(searchCriteria) > -1 
            {
                return true;
            }
            return false;
        }  

    };

我有一个过滤器，但我不了解的是嵌套功能。为什么项目仅在返回功能中可用。返回函数也是在TypeScript中正确执行它的方法吗？这样问一些稍微开放的问题可以吗？

Answer 1

您使用的模式是有状态过滤器（并且不鼓励https://docs.angularjs.org/api/ng/filter/filter）

强烈建议不要编写有状态的过滤器，因为Angular会优先执行这些过滤器，这通常会导致性能问题。只需将隐藏状态作为模型公开并将其转换为过滤器的参数，就可以将许多有状态过滤器转换为无状态过滤器。

您应该考虑将searchCriteria作为返回函数的参数。那么语法就像filter:Model.searchText:Model.SearchCriteria

public searchText()
{

    return function (item, searchCriteria) {
        if (item.DisplayName.indexOf(searchCriteria) > -1 
        {
            return true;
        }
        return false;
    }  

};

Answer 2

这与JavaScript 'array.filter()`非常相似，事实上，如果它在引擎盖下使用它，我不会感到惊讶。

正在发生的事情是searchText方法正在接受您的搜索条件并被调用。它返回的方法由集合中的每个元素上的angulars过滤器调用，并将该元素传递给它。

如果你console.log(item);，你会发现它不是整个阵列而是每个单独的项目。如果返回的方法返回true，则会保留该特定项，如果返回false，则会丢弃它。完全像原生过滤器。因此，您的返回匿名函数不会被调用一次，而是针对数组中的每个项目调用。

我无法对TypeScript的语法和机制发表评论，但返回方法确实是纠正使用此功能的方式，就像本机array.filter()一样。

编辑：如果感兴趣的话，我曾经对我的评论做了双重保证：http://jsfiddle.net/wf5shz70/

编辑：@jonas对有状态过滤器提出了非常好的重要观点，我错过了。

为什么Angular重复过滤器只能访问return函数中的元素

2 个答案: