Question

我正在处理Angular（版本1.4.9）材料virtual repeat deferred loading并稍微修改了示例代码。

我的代码从REST资源加载每页15个项目，并在列表中显示它们。但我的列表显示前15个，然后重复前15个（错误！），然后加载下一批项目（16到30等等）。我无法找到问题，有什么想法会发生这种情况吗？

来自html文件的代码：

<div class="virtualRepeat">
<md-virtual-repeat-container id="vertical-container">
  <md-list>
    <md-list-item md-virtual-repeat="user in listCtrl.userData" md-on-demand class="md-2-line" flex>
      <div class="md-list-item-text">
        Name: {{user.name}}
        ID: {{user.id}}
      </div>
    </md-list-item>
  </md-list>
</md-virtual-repeat-container>
</div>

来自控制器的代码：

...
var vm = this;

var ListItems = function() {
  this.count = 0;
  this.pageSize = 15;
  this.loadedPages = {};
  this.listData = [];
  this.getUserCount_();
}

ListItems.prototype.getItemAtIndex = function(index) {
  var currentPage = Math.floor(index / this.pageSize);
  var page = this.loadedPages[currentPage];
  if (page) {
    return this.listData[index];
  } else if (page !== null) {
    this.getPage_(currentPage);
  }
}

ListItems.prototype.getLength = function() {
  return this.count;
}

ListItems.prototype.getPage_ = function(currentPage) {
  this.loadedPages[currentPage] = null; 
  this.loadedPages[currentPage] = [];

  var pageOffset = currentPage * this.pageSize;

  for (var i = pageOffset; i < pageOffset + this.pageSize; i++) {
    this.loadedPages[currentPage].push(i);
  }

  RestFactory.fetchCurrentPage(currentPage).then(angular.bind(this, function(users) {
    for(var i = 0; i < users.items.length; i++) {
      this.listData.push({
        name: users.items[i].name,
        id: users.items[i].id
      });
    }
  }));

}

ListItems.prototype.getUserCount_ = function() {
  RestFactory.fetchUserCount().then(angular.bind(this, function(count) {
    this.userCount = count;
  }));
}

vm.userData = new ListItems();
...

Angular Material虚拟重复（按需）重复第一次加载的一堆项目

0 个答案: