Question

在前端使用Angular 1.5.9，在服务器上使用WebAPI 2。将服务中的标准$http.get调用到控制器上的Get()方法。这将返回我想用角度控制器填充变量的ViewModel。

var carListController = function ($http, $scope, carService) {

    var model = this;

    model.carList = carService.getCarsByMake('Bentley', 10);

    console.log(model.carList);

    model.cars = model.carList[0].cars;

    model.totalCars = model.carList[0].totalCars;

    model.numberOfPages = model.carList[0].numberOfPages;

};

我收到此错误：

无法读取未定义的属性“汽车”

正如您所看到的，console.log显示model.carList所以我知道问题在控制器代码中填充其他变量。我在这里错过了什么？任何帮助都可以。

修改： carService

var cars = [];

var carService = function ($http) {

    var getCarsByMake = function (make, size) {

        $http.get('http://localhost:50604/api/cars?make=' + make + '&size=' + size)
            .then(function (response) {
                // Success
                angular.copy(response.data, cars);
            }, function () {
                // Failure
            });

        return cars;
    };

    return {
        getCarsByMake: getCarsByMake
    };
};

Answer 1

您必须将$scope变量填充包含在承诺方法中。由于在发生填充时尚未加载model.carList数据，因此错误是正常的（无法读取未定义的属性'cars';意味着carList未定义）。

在您的服务carService.getCarsByMake中，您必须返回promise（$http.get方法）

只有在承诺得到解决后，您才可以使用此数据填充$scope变量。

var carListController = function ($http, $scope, carService) {    
    var model = this;    
    carService.getCarsByMake('Bentley', 10).then(function(response){
        model.carList = response.data;
        model.cars = model.carList.cars;
        model.totalCars = model.carList.totalCars;
        model.numberOfPages = model.carList.numberOfPages;
    });    

};

在服务端返回$http请求：

var cars = [];
var carService = function ($http) {
    var getCarsByMake = function (make, size) {
        return $http.get('http://localhost:50604/api/cars?make=' + make + '&size=' + size);
    };

    return {
        getCarsByMake: getCarsByMake
    };
};

如何从$ http.get检索的数组中填充Angular控制器变量

1 个答案: