Question

我现在正在一个小型AngularJS（1.6.6）网站上工作，我正在从projects.js组件（而不是我的main / index js文件）中调用一个（本地）JSON文件。当我console.log（$ scope.projectItems）时，将检索数据并在控制台中显示JSON数组。但是，当我尝试提取该数据并使用ng-repeat将其显示给最终用户时，没有任何显示，并且控制台中也没有错误。

有人可以给我建议我做错了什么吗？
谢谢。


[{
        "Name": "Home 1",
        "Text": "This is the Image of home 1"
    },
    {
        "Name": "Home 2",
        "Text": "This is the Image of home 2"
    }
]

<ul class="Projects_List">
    <li class="Project_Item" ng-repeat="Item in $ctrl.projectItems"> 
        {{Item.Name}}
      </li>
</ul>

angular.
module('App').
component('projects', {
    templateUrl: "projects.html",
    controller: function ProjectController($scope, $http) {

        $http({
            method: 'GET',
            url: 'HomeProjects.json'
        }).then(function(data) {
            $scope.projectItems = data;
            console.log($scope.projectItems);
            console.log("This is working");

        }, function(error) {
            console.log("There is an error");
        });

    }
});

Answer 1

在模板中，您尝试访问控制器上的项目，但它们在范围内。

尝试更改此内容

<li class="Project_Item" ng-repeat="Item in $ctrl.projectItems">

对此

<li class="Project_Item" ng-repeat="Item in projectItems">

Answer 2

组件控制器应避免使用$ scope。这使向Angular 2+的迁移更加困难。

代替使用this上下文：

app.component('projects', {
    templateUrl: "projects.html",
    controller: function ProjectController( ̶$̶s̶c̶o̶p̶e̶ , $http) {
        var $ctrl = this;
        $http({
            method: 'GET',
            url: 'HomeProjects.json'
        ̶}̶)̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶(̶d̶a̶t̶a̶)̶ ̶{̶
        }).then(function(response) {
            ̶$̶s̶c̶o̶p̶e̶.̶p̶r̶o̶j̶e̶c̶t̶I̶t̶e̶m̶s̶ ̶=̶ ̶d̶a̶t̶a̶;̶
            $ctrl.projectItems = response.data;
            console.log($ctrl.projectItems);
            console.log("This is working");

        }, function(error) {
            console.log("There is an error");
            throw error;
        });

    }
});

$ http服务承诺还返回response是属性的data对象。

AngularJS获取JSON文件，但不会显示

2 个答案: