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