AngularJS получает файл JSON, но не отображает

Question

Я сейчас работаю на небольшом веб-сайте AngularJS (1.6.6), я вызываю (локальный) файл JSON из моего компонента projects.js (а не из моего файла main / index js).Данные извлекаются, и в консоли массив JSON отображается, когда я console.log ($ scope.projectItems).Однако, когда я пытаюсь получить эти данные и отобразить их конечному пользователю с помощью 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

Компонентные контроллеры должны избегать использования $ 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 является свойством.

Answer 2

В шаблоне вы пытаетесь получить доступ к элементам на контроллере, но они находятся в области видимости.

Попробуйте изменить это

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

К этому

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