Question

我现在正在使用角度版本7和蚂蚁设计进行卡片和分页。我关注了ant design网站（https://ng.ant.design/components/card/en）来制作卡片，但没有显示如何结合卡片和分页。我的问题是，如果我总共有10张卡，并且我想每页显示5张卡。任何人都可以吗？

Answer 1

您可以将列表组件与卡结合使用。列表组件支持分页或无限滚动，无论哪种方式都最适合您，并且其中可以包含各种组件。

您需要将nzPagination =“ your_unique_identifier”属性添加到列表中，并为分页创建模板，如下所示：

Here is an official documentation for it

小例子

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-list-grid',
  template: `
    <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzGrid]="{ gutter: 16, span: 6 }" [nzPagination]="pagination">
      <ng-template #item let-item>
        <nz-list-item [nzContent]="nzContent">
          <ng-template #nzContent>
            <nz-card [nzTitle]="item.title">
              Card content
            </nz-card>
          </ng-template>
        </nz-list-item>
      </ng-template>
      <ng-template #pagination>
        <nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
      </ng-template>
    </nz-list>`
})
export class NzDemoListGridComponent {
  data = [
    {
      title: 'Title 1'
    },
    {
      title: 'Title 2'
    },
    {
      title: 'Title 3'
    },
    {
      title: 'Title 4'
    }
  ];
}

蚂蚁设计分页（角度）

1 个答案: