对同一组件的多次使用使用 ngx-pagination

Question

我正在使用 ngx-pagination 库，当我使用它一次时，它非常适合我的可重用数据表组件，但是多次使用该组件会导致分页仅在一个组件上工作。如果可能的话，我怎样才能使这个分页可重用？

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                <label>{{col.header}}</label>
            </th>
        </tr>
    </thead>
    <tbody>    
        <tr *ngFor="let row of data | paginate: { itemsPerPage: 6, 
           currentPage: p }">`
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

<pagination-controls 
class="my-pagination" 
(pageChange)="p = $event">
</pagination-controls>

table.component.ts

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})

export class DataTableComponent {

  @Input() data
  @Input() cols
  p: number = 1

}

Answer 1

您可以添加 id 属性。这将允许您在同一页面上进行多个分页，也可能会解决您的问题。