Javascript 角度材质虚拟重复(按需)将第一批加载的项目重复两次
我正在处理Angular(版本1.4.9)材质,并对示例代码进行了轻微修改 我的代码从REST资源每页加载15个项目,并在列表中显示它们。 但是我的列表显示了前15项,然后重复前15项(错误!)然后加载下一组项目(16到30项,以此类推)。我找不到问题,你知道为什么会这样吗 html文件中的代码:Javascript 角度材质虚拟重复(按需)将第一批加载的项目重复两次,javascript,angularjs,material-design,ng-repeat,angular-material,Javascript,Angularjs,Material Design,Ng Repeat,Angular Material,我正在处理Angular(版本1.4.9)材质,并对示例代码进行了轻微修改 我的代码从REST资源每页加载15个项目,并在列表中显示它们。 但是我的列表显示了前15项,然后重复前15项(错误!)然后加载下一组项目(16到30项,以此类推)。我找不到问题,你知道为什么会这样吗 html文件中的代码: <div class="virtualRepeat"> <md-virtual-repeat-container id="vertical-container"> <
<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>
名称:{{user.Name}
ID:{{user.ID}
来自控制器的代码:
...
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();
...
。。。
var vm=这个;
var ListItems=函数(){
此值为0.count;
这个.pageSize=15;
this.loadedPages={};
this.listData=[];
这是.getUserCount_389;();
}
ListItems.prototype.getItemAtIndex=函数(索引){
var currentPage=Math.floor(索引/this.pageSize);
var page=this.loadedPages[currentPage];
若有(第页){
返回此.listData[index];
}else if(第!==null页){
此.getPage_u2;(当前页);
}
}
ListItems.prototype.getLength=函数(){
返回这个.count;
}
ListItems.prototype.getPage=函数(currentPage){
this.loadedPages[currentPage]=null;
此.loadedPages[currentPage]=[];
var pageOffset=currentPage*this.pageSize;
对于(变量i=pageOffset;i
在代码中发现问题是很重要的。你能为你的代码做一个演示吗?例如,通过修改初始行,我无法在代码上重现这种奇怪的行为。这可能意味着在代码的其他部分重复前15行的原因。您可以尝试完全刷新该部件/模块,并从完全复制自虚拟重复文档的代码开始。感谢您尝试@shershen,问题解决了。为fetchCurrentPage()提供另一个参数