为什么 ui-grid in Angular Meteor 在激活过滤器时不显示其数据？

Question

你好我有个问题

工作：

• 流星
• Angular流星
• ui-网格

我遵循文档 ui-grid link 中的 plunker 示例 问题是当过滤器被激活时数据不显示。

我在控制台中没有错误。

我把我的代码：

html 文件

<button id='toggleFiltering' ng-click="inventario.toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="inventario.gridOptions" class="grid"></div>

js文件

class Inventario {
    constructor($scope, $reactive, $uibModal, $http, uiGridConstants) {
        'ngInject';
        $reactive(this).attach($scope);
        this.$uibModal = $uibModal;
        var today = new Date();
        var nextWeek = new Date();

        this.highlightFilteredHeader = (row, rowRenderIndex, col, colRenderIndex) => {
            if( col.filters[0].term ){
                return 'header-filtered';
            } else {
                return '';
            }
        };

        this.gridOptions = {
            enableFiltering: true,
            onRegisterApi: (gridApi) => {
                this.gridApi = gridApi;
            },
            columnDefs: [
                // default
                { field: 'name', headerCellClass: this.highlightFilteredHeader },
                // pre-populated search field
                { field: 'gender', filter: {
                    term: '1',
                    type: uiGridConstants.filter.SELECT,
                    selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
                },
                    cellFilter: 'mapGender', headerCellClass: this.highlightFilteredHeader },
                // no filter input
                { field: 'company', enableFiltering: false, filter: {
                    noTerm: true,
                    condition: (searchTerm, cellValue) => {
                        return cellValue.match(/a/);
                    }
                }},
                // specifies one of the built-in conditions
                // and a placeholder for the input
                {
                    field: 'email',
                    filter: {
                        condition: uiGridConstants.filter.ENDS_WITH,
                        placeholder: 'ends with'
                    }, headerCellClass: this.highlightFilteredHeader
                },
                // custom condition function
                {
                    field: 'phone',
                    filter: {
                        condition: (searchTerm, cellValue) => {
                            var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
                            return strippedValue.indexOf(searchTerm) >= 0;
                        }
                    }, headerCellClass: this.highlightFilteredHeader
                },
                // multiple filters
                { field: 'age', filters: [
                    {
                        condition: uiGridConstants.filter.GREATER_THAN,
                        placeholder: 'greater than'
                    },
                    {
                        condition: uiGridConstants.filter.LESS_THAN,
                        placeholder: 'less than'
                    }
                ], headerCellClass: this.highlightFilteredHeader},
                // date filter
                { field: 'mixedDate', cellFilter: 'date', width: '15%', filter: {
                    condition: uiGridConstants.filter.LESS_THAN,
                    placeholder: 'less than',
                    term: nextWeek
                }, headerCellClass: this.highlightFilteredHeader
                },
                { field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%',
                }
            ]
        };

        $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
            .success((data) => {
                this.gridOptions.data = data;
                this.gridOptions.data[0].age = -5;

                data.forEach( function addDates( row, index ){
                    row.mixedDate = new Date();
                    row.mixedDate.setDate(today.getDate() + ( index % 14 ) );
                    row.gender = row.gender==='male' ? '1' : '2';
                });
            });

        this.toggleFiltering = () => {
            this.gridOptions.enableFiltering = !this.gridOptions.enableFiltering;
            this.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
        };

    }
}

const name = 'inventario';

// Módulo
export default angular
    .module(name, [
        uiRouter,
        EditarArticulo
    ])
    .component(name, {
        templateUrl: `imports/ui/components/${name}/${name}.html`,
        controllerAs: name,
        controller: Inventario
    })
    .config(config)
    .filter('mapGender', function() {
    var genderHash = {
        1: 'male',
        2: 'female'
    };

    return function(input) {
        if (!input){
            return '';
        } else {
            return genderHash[input];
        }
    };
});

Answer 1

鉴于禁用过滤后一切似乎都正常，您声明的（多个）过滤器一定有问题。

很可能是过滤器的组合排除了您的所有数据。首先注释掉所有过滤器（您应该会看到所有数据），然后 re-introduce 一个一个地过滤，直到您再次看到问题。

这将缩小问题的范围，并让您看到哪个过滤器有问题。