gpt4 book ai didi

javascript - Angular 中如何从 json 中获取数据分页

转载 作者:行者123 更新时间:2023-11-28 16:58:15 24 4
gpt4 key购买 nike

我是新手,我有一个 HTTPclient 服务,可以从 JSON 文件中获取所有数据,有 1000 个寄存器,我如何进行分页,例如,显示前 10 条并对其进行分页

这是我的服务

@Injectable({
providedIn: 'root'
})
export class ProductsService {

constructor(private http:HttpClient ) {
}

getPorducts(): Observable<Product[]> {

return this.http.get<Product[]>('assets/data/DATA.json');

}
}

我只是在我的 home 组件上使用它

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styles: []
})
export class HomeComponent implements OnInit {

public products: any[] = [];


constructor(private _Products: ProductsService) { }

public lastKey: any[] = [];

ngOnInit() {
this._Products.getPorducts().subscribe(data => {
if (data) {
this.products = data;
}
});


}

我该怎么做?提前致谢

最佳答案

让我们开始从服务中读取数据(在服务中我们从 json 文件读取数据)

export class AppComponent implements OnInit {

public products: any[] = [];

curPage: number;
pageSize: number;

constructor(private _Products: ProductService) { }

ngOnInit(): void {
this._Products.getJSON().subscribe(response => {
this.products = response.items;
});

this.curPage = 1;
this.pageSize = 10; // any page size you want
}

numberOfPages() {
return Math.ceil(this.products.length / this.pageSize);
};
}

这里我们添加了两个变量,curPagepageSize,可以根据需求进行更新。 (单击)将引导用户到所需的页面。您可以根据需要更新分页控件的外观。

最后在你的html中:

 <table class="table table-sm table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of products | slice: (curPage * pageSize) - pageSize :curPage * pageSize">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
<p class="pagination">
<button [disabled]="curPage == 1" (click)="curPage = curPage - 1">PREV</button>
<span>Page {{curPage}} of {{ numberOfPages() }}</span>
<button [disabled]="curPage >= list.length/pageSize" (click)="curPage = curPage + 1">NEXT</button>
</p>

Stackblitz Here

另一种方法是使用 NPM 包:ngx-pagination

第 1 步:通过终端运行以下命令

npm install ngx-pagination --save

第 2 步:从服务读取数据

export class AppComponent implements OnInit {

public products: any[] = [];
constructor(private _Products: ProductService) { }

ngOnInit(): void {
this._Products.getJSON().subscribe(response => {
this.products = response.items;
});
}

}

第 3 步:在 app.module.ts 中导入依赖项

import { NgxPaginationModule } from 'ngx-pagination';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxPaginationModule --> this line
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

现在让我们看一下 app.module.ts 中导入了 ngx-pagination 模块的代码

第 4 步:从 app.component.html 更新 View

<table class="table table-sm table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of products | paginate:{itemsPerPage: 5, currentPage:p}">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
<pagination-controls (pageChange)="p=$event"></pagination-controls>

第 5 步:运行应用使用 npm start 通过终端运行应用程序

Stackblitz Here

关于javascript - Angular 中如何从 json 中获取数据分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58468216/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com