Муравьиная нумерация (угловая)

Question

Я сейчас делаю карты и нумерацию страниц, используя угловую версию 7 и дизайн муравья.Я следил за сайтом Ant Design (https://ng.ant.design/components/card/en) для карт, но он не показывает, как объединить карты и нумерацию страниц. У меня вопрос, если у меня всего 10 карт, и я хочу отображать 5 карт на странице. Может кто-нибудь должен мнекак?

Answer 1

Вы можете использовать компонент списка в сочетании с карточками.Компонент списка поддерживает нумерацию страниц или бесконечную прокрутку, в зависимости от того, что вам больше подходит, и позволяет использовать различные компоненты внутри него.

Вам необходимо добавить свойство nzPagination = "your_unique_identifier" в список и создать шаблон для нумерации страниц.как это:

Вот официальная документация для него

Маленький пример

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'
    }
  ];
}