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[]中对象的索引与{ {1}}并返回数据。

page

如果我浏览到URL 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; } }，则前100条记录（0-99）已成功打印出来，并且控制台输出与预期的一样：数字0-99。但是，在URL地址http://localhost:4200/page/0上，没有任何内容输出到控制台或page.component.html中的表。我期望看到数字100-199被打印到http://localhost:4200/page/1的控制台上，并且数据被打印出表格。

编辑：

这里是 page.component.html ：

/page/1

，这里是 page.component.ts ：

<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>

Answer 1

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

let index = 0;

...

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

如果索引始终为零，则- 第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_size-1页开始

Answer 2

这里的问题是变量page的类型为string，而不是number。如果没有number类型，则page为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++;
}

如何创建用于在Angular中对数据进行分页的自定义管道？

2 个答案: