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属性。这样您就可以在同一页面上进行多次分页，也可以解决您的问题。

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

1 个答案: