angularjs - Kendo-UI Grid 不通过 AngularJS 呈现数据

Question

我正在使用 Restangular 来解决响应(产品列表)...我知道这正在解决。

我是 Kendo-UI 的新手。但是已经建立了一个基本的测试网格，如下所示。我正在使用 k-rebind，因为在创建网格时产品数组可能未解析。

<kendo-grid k-options="mainGridOptions" k-rebind="products"></kendo-grid>

在我的 Controller 中:

$scope.products = [];
        $scope.therapyAreas = [];
        $scope.dropDownTAs = [];

        prProductService.getProducts().then(function(products) {
            $scope.products = products;
            prTAService.getTAs().then(function(tas) {
                $scope.therapyAreas = tas;
                for(var i = 0; i < $scope.therapyAreas.length;i++) {
                    $scope.dropDownTAs.push({id: $scope.therapyAreas[i].id, therapyArea: $scope.therapyAreas[i].therapyArea});

                }               
            });
        });

        $scope.mainGridOptions = {
                dataSource: {
                    data: $scope.products                    
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "productName",
                    "activeIngredients",
                    "productComments",
                    "gpt",
                    "ta"
                ]
        };
    }]) 

我知道 products 数组正在返回，我原以为 k-rebind 会观察 products 数组的变化，所以当它被解析时它会刷新 UI...没有这样的运气。

我已经尝试将手动数组 bashing 到数据源中以镜像产品数组的响应，并且网格工作正常。

问候

我

Answer 1

您完全正确，Kendo UI 网格最初无法访问数据，因此当网格在页面上呈现时，它只会绑定(bind)到一个空数组 - 不会给您任何数据。在这种情况下使用 k-rebind 属性也是正确的，因为它应该留意范围何时发生变化。

但是，您错过的一件重要事情是 k-rebind 应该设置为与您的选项相同，如this documentation article .这很容易被忽略，但我以前在类似的场景中使用过。

因此，虽然我还没有对此进行测试，但我相信以下内容应该适合您:

<kendo-grid k-options="mainGridOptions" k-rebind="mainGridOptions"></kendo-grid>