AngularJS错误：TypeError：无法读取未定义的属性“图像”

Question

AngularJS：v1.5.11

我试图显示来自JSON数组的图像。

这是正确的方法$scope.mainImage = $scope.template.images[0].name; ： $scope.mainImage = $scope.template.images[0].name; 。 这是错误中的行，它表示无法读取images属性。

我的控制器在templates.js文件中：

.controller("TemplatesDetailsCtrl", ["$scope", "$routeParams", "$http", "$filter", function($scope, $routeParams, $http, $filter ){
    var templateId = $routeParams.templateID;
    $http.get("json/templates.json").success(function(data){
        $scope.template = $filter("filter")(data, function(d){
            return d.id == templateId;
        })[0];
        $scope.mainImage = $scope.template.images[0].name; //THIS IS LINE 30
    });
}]);

我正在尝试显示数组中的第一张图像。 所以我的HTML是：

<img class="img-full" src="img/{{mainImage}}">

本尝试了很多但无法显示图像。 我收到此错误：

请帮忙。

Answer 1

似乎未定义“模板”对象。 您可以在尝试使用undefined的属性之前对其进行测试：

if ($scope.template)
   $scope.mainImage = $scope.template.images[0].name; //THIS IS LINE 30