Angular 如何创建自定义管道以角度方式对数据进行分页？

我需要用Angular编写一个自定义管道，它包含两个参数：一个对象数组和一个页码。管道将过滤掉数据，以便每页显示100条数据记录。例如，第1页显示记录0-99，第2页显示记录100-199，第3页显示记录200-299等

json包含一个包含1300个对象的数组。下面是一段数据：

数据中的每个对象类似于以下对象：

{
    "location_type": "KAUPPAKESKUS",
    "postalcode": "2770",
    "availability": "24 H AUKIOLO",
    "location": "ESPOONTORI /INSTRUMENTARIUM",
    "municipality": "ESPOO",
    "target_address": "KAMREERINTIE 3",
    "availability_details": "",
    "coordinates_lon": "24.656450",
    "coordinates_lat": "60.203750"
}

以下pagination.pipe.ts将ATM[]和page作为参数，确保ATM[]中对象的索引与页面相关并返回数据

import { Pipe, PipeTransform } from '@angular/core';

interface atm {
    target_address: string,
    postalcode: string,
    municipality: string,
    location: string,
    location_type: string,
    availability: string,
    availability_details: string,
    coordinates_lat: string,
    coordinates_lon: string
}

@Pipe({
  name: 'pagination'
})
export class PaginationPipe implements PipeTransform {

  transform(atms: atm[], page: number): any {

    let data: atm[] = [];
    let index= 0;
    let per_page = 100;

    for (let atm of atms) {
      if (index >= (page * per_page) && index < (page + 1) * per_page) {
        console.log(index);
        data.push(atm);
        index++;
      }
    }

    return data;

  }

}

下面是page.component.ts：

---

索引逻辑似乎有问题

let index = 0;

...

if (index >= (page * per_page) && index < (page + 1) * per_page) {

---

您可能希望将索引设置为从page*page_size-1开始，这里的问题是变量page的类型是字符串而不是数字。如果没有数字类型，则pageis 1时的以下表达式计算错误：

让lastIndex=page+1//打印出11而不是2

我通过将变量page键入number来修复此问题：

语句index++需要移到if语句之外，以便在每个for循环中始终增加索引：

---

你能在你观看页面的地方添加代码并将该值发送到管道中吗？@OneLinch Man我在那里为你提供了代码。如果你只在转换方法中登录，它会触发吗？我应该在那里登录什么？自动取款机如果是的话，那么是的，它确实成功地记录了日志。任何东西都可以查看它是否触发。我将index++移到If语句之外，现在/page/1显示100-1099之间的记录，尽管我仍然希望看到100到199之间的记录。有什么问题吗？我建议使用类似myArray.slice的方法来检查maxLength，而不是自动递增之类的方法。类似于atms.slicestartIndex，endIndex，您必须计算它是应该在endIndex结束，还是只传递startIndex，它将获取所有剩余的数据。

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ATMsService } from './atms.service';

interface atm {
    target_address: string,
    postalcode: string,
    municipality: string,
    location: string,
    location_type: string,
    availability: string,
    availability_details: string,
    coordinates_lat: string,
    coordinates_lon: string
}

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {

  page: number;  
  atms: atm[] = [];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: ATMsService
    ) {}

  ngOnInit() {
    this.service.getAll().then((data) => {
      this.atms = data;
    })

    this.route.params.subscribe(parameters => {
      this.page = parameters.page;
    })
  }

}

let index = 0;

...

if (index >= (page * per_page) && index < (page + 1) * per_page) {

if (0 >= (0 * 100) && 0 < (0 + 1) * 100) // true, will build list

if (0 >= (1 * 100) && 0 < (1 + 1) * 100) // false, (0 >= (1 * 100) will never be true

// similar answer as 1

ngOnInit() {
    this.route.params.subscribe(parameters => {
        this.page = +parameters.page;
    })
}

for (let atm of atms) {
  if (index >= (page * per_page) && index < (page + 1) * per_page) {
    data.push(atm);
  }
  index++;
}