问题描述
我在显示一系列照片(json服务器)以及棱角分页器时遇到麻烦。 数组会忽略页面划分并显示所有照片。
import { ProductEditComponent } from './../product.edit/product.edit.component';
import { ListComponentsClass } from './../../../share/ListComponents';
import { SettingService } from 'src/app/share/services/settings.service';
import { Router } from '@angular/router';
import { MsgList } from 'src/app/share/services/msg.list';
import { UniversalDataService } from 'src/app/share/services/universal.data.service';
import { Component,OnInit } from '@angular/core';
import { DialogService } from 'src/app/share/services/dialog.service';
import { IProduct,compRoutes } from 'src/app/share/models/type';
import { PageEvent } from '@angular/material';
@Component({
selector: 'app-product.list',templateUrl: './product.list.component.html',styleUrls: ['./product.list.component.scss']
})
export class ProductListComponent extends ListComponentsClass<IProduct> implements OnInit {
data = [];
pageNum = 0;
pageSize = 2;
constructor(
public $SETTINGS: SettingService,public router: Router,public $MSG: MsgList,public listService: UniversalDataService,public dialogService: DialogService
) {
super($SETTINGS,router,$MSG,listService,dialogService);
this.editUrl = compRoutes.productBuy;
this.dataUrl = compRoutes.product;
this.listService.setServiceUrl(this.dataUrl);
}
ngOnInit() {
this.itemsLoad(this.componentData.length,this.$SETTINGS.get("startListLen"));
this.getData({ pageIndex: this.pageNum,pageSize: this.pageSize });
}
getData(pageNumbers) {
let index = 0;
let startingIndex = pageNumbers.pageIndex * pageNumbers.pageSize;
let endingIndex = startingIndex + pageNumbers.pageSize;
this.data = this.componentData.filter(() => {
index++;
return (index > startingIndex && index <= endingIndex) ? true : false;
});
}
}
html
<div class="card-list">
<div>
<div *ngFor="let product of componentData" >
<app-card [product]="product"></app-card>
</div>
</div>
<div class="img-paginator">
<mat-paginator [length]="componentData.length" [pageSize]="pageSize" [pageIndex]="pageNum"
[pageSizeOptions]="[1,2,4,8,10]" (page)="getData($event)">
</mat-paginator>
</div>
如果我将* ngFor =“ let componentData 的乘积更改为* ngFor =” let product 数据”的分页将开始工作,但是页面加载数组将是空的。我该如何解决,可以避免两个数组?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)