如何创建一个在Angular中分页数据的自定义管道？

Question

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

data.json包含一个包含1300个对象的数组。这里有一段数据：https://pastebin.com/7V2DNj8W

数据中的每个对象都如下所示：

{
    "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将atms[]和page作为参数，确保atms[]中对象的索引与page相关并返回数据。

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;

  }

}

如果我浏览到URL http://localhost:4200/page/0，则前100条记录（0-99）成功打印出来，控制台输出如预期：数字0-99。但是，在URL地址http://localhost:4200/page/1上没有打印到控制台或page.component.html中的表。我期待看到在/page/1上打印到控制台的数字100-199并且数据被打印出来。

编辑：

这是page.component.html：

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Address</th>
        <th>Location</th>
        <th>Availability</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let atm of atms | pagination:page">
        <td>{{ atm.target_address }}, {{ atm.postalcode }}
          {{ atm.municipality }}</td>
        <td>{{ atm.location }}, {{ atm.location_type }}</td>
        <td>{{ atm.availability }} {{ atm.availability_details }}</td>
      </tr>
    </tbody>
  </table>

这是page.component.ts：

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;
    })
  }

}

Answer 1

“索引”逻辑似乎存在问题。

let index = 0;

...

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

如果index始终为零，那么第0页：

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

第1页：

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

页> 1：

// similar answer as 1

您可能希望将索引设置为从page * page_size - 1开始

Answer 2

这里的问题是变量page有一种string而不是number。没有number的类型，当pageis 1计算错误时，以下表达式：

let lastIndex = page + 1 // prints out 11 instead of 2

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

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

语句index++需要移出if语句之外，以便index在每个for循环中总是增加：

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