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

Posted 2023-02-23

【中文标题】将数据从控制器传递到 HTML 模板

【英文标题】：Passing Data from Controler to HTML Template

【发布时间】：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>

为什么我看不到列表？

【参考方案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
);