Question

我有一张＆＃34;卡片列表＆＃34;在一个Angular4项目中，我想每页只显示6个，我可以在桌面上使用分页，但使用＆＃34; card＆＃34;我不能（我认为它等待行和列，卡的代码是：

<div style="position:relative;">
                 <table class="row">
                    <div id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed"  *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;">
                        <div class="card mb-2 ">
                            <div class=" card-header table table-hover table-striped">

                                <td>

                                    <ng-container *ngFor="let column of entityList.metadata.columns" [ngSwitch]="column.order" >

                                        <tr *ngSwitchCase="2" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>
                                        <tr *ngSwitchCase="3" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>
                                        <tr *ngSwitchCase="5" >{{ entityName.toLowerCase() + '.' + column.key  | translate}}&nbsp; - &nbsp;
                                            {{getValue(instance, column.key) | ellipsis:200}}</tr>

                                    </ng-container>
                                </td>
                               </div>
                            </div>
                        </div>
                    </table>
</div>

我得到了卡片，但只在一个页面上，我怎样才能以最简单的方式使用分页？

PS：在列表中，我使用下一行分页：

...
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover table-striped">
<thead>
                <tr>
                    <th *ngFor="let column of entityList.metadata.columns">
                        {{ entityName.toLowerCase() + '.' + column.key | translate}}
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let instance of entityList.list; trackBy:trackByFn; let idx=index;">
                    <ng-container *ngFor="let column of entityList.metadata.columns"  [ngSwitch]="column.type">
                        <td *ngSwitchCase="'date'">{{getValue(instance, column.key) | date:'y/MM/dd'}}</td>
                        <td *ngSwitchCase="'text'">{{getValue(instance, column.key) | ellipsis:200}}</td>
                        <td *ngSwitchCase="'boolean'">
                            <input type="checkbox" [checked]="getValue(instance, column.key)" disabled/></td>
                        <td *ngSwitchDefault>{{ getValue(instance, column.key)}}</td>
                    </ng-container>
                </tr>
            </tbody>
        </table>

...

我对桌上的线条和列进行了分页。

Answer 1

我想我成功了，我使用了ngx-paginantion：首先安装它：

npm install ngx-pagination

在appModule上添加：

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
    imports: [
        NgxPaginationModule
....

on Html，* ngfor你想要it iterato并细分为页面：

*ngFor="let instance of (entityList.list | paginate: { itemsPerPage:5, currentPage: p} )

(...)

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

为了让事情变得简单，我正在通过div创建卡片：
<table class="row">
<div  id="jasmine_content" class="x_content col-lg-4 col-md-5 col-sm-8 col-form-label-sm" [ngbCollapse]="isCollapsed"  *ngFor="let
实例（entityList.list | searchFilter：search.value）;   trackBy：trackerByFn;让idx = index;“＆gt;       （.......卡在这里......）

如何使用ngb-pagination对项目（实例）进行分页，或者   类似的东西？

在div / table上使用bootstrap和Angular4进行分页

1 个答案: