如何在Angular 8中基于分页动态增加表格索引答案

【问题标题】：How to dynamically increase table index based on pagination in Angular 8如何在Angular 8中基于分页动态增加表格索引
【发布时间】：2019-08-28 01:09:55
【问题描述】：

我正在 Angular 8 中测试分页，但我的表格索引不会随着页码的变化而变化。在 AgularJS 我知道如何使用 $watch 和 serial 但我不知道如何使表索引动态变化。在我的表格中，每页的项目是 20，所以当我在第 2 页时，我想要索引 21 - 40，例如我怎么得到它？请参阅下面的代码示例。

HTML

<tr *ngFor="let book of books$ | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
<td>{{ i + 1 }}</td>
<td>{{book.name}}</td>
</tr>
<!--Including the pagination control.-->
<div class="text-right">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>

App.component.ts

// Pagination parameters.
p: Number = 1;
count: Number = 20;

constructor(private http: HttpClient) { }

ngOnInit() {
return this.http.get<any>(this.bookUrl)
   .subscribe(data => this.books$ = data);
}

分页工作正常，我只需要动态索引方面的帮助。

【问题讨论】：

标签： angular indexing pagination

【解决方案1】：

使用算术：

{{ (p - 1) * count + i + 1 }}

如果您在第 3 页，p 是 3，所以 (p - 1) 是 2，所以 (p - 1) * count 是 40，所以索引将从 41 开始（i = 1）。

【讨论】：

你能展示你的代码的用法吗，因为当我把你的建议放在我的 td 中时，错误：“预期为数字类型”
不确定这个错误来自哪里，但我敢打赌你使用的是Number而不是number。
也许你可以帮我解决这个问题，当我通过我的 url 获取所有数据时，数据表的 panning 工作正常。为了通过输入字段和按钮获取某些关键字的数据，我创建了一个函数：例如 search(){'url' + keyword}。现在的问题是，为什么分页对返回的数据不起作用，它只是显示第 1 页，但我的项目比“计数”更多。
对不起，我不够聪明，无法在没有看到代码的情况下找到您的代码中的错误。使用所有相关代码发布另一个问题。作为堆栈闪电战的完整可重现示例将是该新问题的理想伴侣。