将数据从控制器传递到 HTML 模板答案

【问题标题】：Passing Data from Controler to HTML Template将数据从控制器传递到 HTML 模板
【发布时间】：2018-06-28 20:08:53
【问题描述】：

我需要将数据从控制器传递到 html 模板。我可以看到来自 console.log 的数据，但我没有通过 DOM 看到它。

这是我的组件：

import ItemService from '../../services/test.service.js'

const TestComponent = {
    controllerAs: 'testCtrl',
    controller: function ($http) {
                    ItemService.getItems($http)
                    .then(data => {
                        this.items = data.categories;
                        console.log('inside controller', this.items);
                        })
    },
    template: require('./test.html'),
    bindings: {

    }
};

export default TestComponent;

这是模板：./test.html

<div class="test">
    NAMES OF ITEMS:
    <ul>
        <li ng-repeat="item in testCtrl.items">
          <p>{{item.name}}</p>
        </li>
      </ul>
</div>

为什么我看不到列表？

【问题讨论】：

标签： angularjs controller components angular1.6

【解决方案1】：

我相信this 的上下文可能在$http 的回调中发生了变化。它不再指向您的控制器。

尝试在局部变量中存储对控制器上下文的引用（例如：self）：

var self = this;
ItemService.getItems($http)
.then(data => {
    self.items = data.categories;
    console.log('inside controller', self.items);
})

【讨论】：

还是不行。实际上控制台的数据很好。我认为我的问题与数据的反应性有关。也许你可以澄清一下
是的，但您将其绑定到不同的上下文，因此控制台日志仍将在 http 回调中工作。你能在 'then' 回调中放置一个断点并检查 'this' 是否指向你的控制器吗？
我知道'this'与控制器有关。

【解决方案2】：

如果 this 是你的控制器并且仍然没有显示，可能数据没有被范围消化，这是 angularjs 中的一个常见的事情，你需要强制使用 $scope.$digest()在分配之后，或

$scope.$apply(function(){
//assign inside here
});

如果您处于一个摘要周期的中间，这可能会导致问题，因此更好的方法是使用 $timeout：

$timeout(() => {
//assign here
});

【讨论】：