Angular Material - 无限滚动不起作用答案

【问题标题】：Angular Material - infinite scroll not workingAngular Material - 无限滚动不起作用
【发布时间】：2016-07-09 12:17:26
【问题描述】：

我正在使用 Angular Material 的无限滚动，它在此处定义：https://material.angularjs.org/latest/demo/virtualRepeat

我的第一个问题是：这个 virtualRepeat 是否需要在带有滚动条的 div 内，还是可以应用于整个页面？我实际上不想将我的内容放在另一个带有额外滚动条的 div 中（除了浏览器的滚动条）。

所以，我使用的是$http，如果我提供的值为 0，我的服务返回 30 个项目，如果我提供的值为 1，则返回 60 个项目，等等。

var _page = 0;
$scope.infiniteItems = {
    numLoaded_: 0,
    toLoad_: 0,

    // Required.
    getItemAtIndex: function(index) {
        if (index > this.numLoaded_) {
            this.fetchMoreItems_(index);
            return null;
        }
        return index;
    },

    // Required.
    // For infinite scroll behavior, we always return a slightly higher
    // number than the previously loaded items.
    getLength: function() {
        return this.numLoaded_ + 5;
    },

    fetchMoreItems_: function(index) {

        // For demo purposes, we simulate loading more items with a timed
        // promise. In real code, this function would likely contain an
        // $http request.

        if (this.toLoad_ < index) {
            this.toLoad_ += 30;
            postFactory.getPastPosts(_page).then(angular.bind(this, function(data) {
                this.numLoaded_ = this.toLoad_;
                _page++;
            }));
        }
    }
};

这是我的 HTML

        <md-content flex layout-padding> 

        <div class="virtualRepeatdemoInfiniteScroll">
            <md-list>
                <md-virtual-repeat-container id="vertical-container">
                  <div md-virtual-repeat="post in infiniteItems" md-on-demand="" class="repeated-item" flex="">
                    <md-divider></md-divider>
                    {{post}}
                    <past-post model="post" action="reaction(currentPost, candidate, type)"></past-post>
                  </div>
                </md-virtual-repeat-container>                      

                </span>
            </md-list>
        </div>

    </md-content>

问题是什么都没有发生。我没有价值。问题可能也出在postFactory.getPastPosts(_page).then(angular.bind(this, function(data) { 中，因为数据实际上在data.data 中，但文档中没有任何内容可以显示在何处以及如何设置数据。

更新

getPastPosts 的代码非常简单：一个基本的$http 请求：

function getPastPosts(page) {
    return $http.get(baseUrl + '/api/content/past-posts/' + page)
}

我在应用程序的各个部分都使用它，所以毫无疑问它正在工作。

【问题讨论】：

您是否尝试过设置断点并检查 then() 中的可用内容？
您可以在问题中添加postFactory 的代码吗？
我已经更新了我的问题。
我想通过$http 从getPastPosts() 函数返回的承诺没有得到解决。当函数在滚动时调用时，你能检查你的控制台是否有错误吗？
没有错误，数据完全正确。采用标准的 http angular 格式。

标签： angularjs angular-material

【解决方案1】：

如果数据返回一个值，你可以在 getPastPosts() 中得到一个对象。

无限滚动将不起作用，因为它不是数组。

infiniteItems 必须是数组类型。

试试这样，

if(data.size == 1){ // I don't know your data structure.
   this.push(data.data);
}else{
   this = data.data
}

【讨论】：