Angular Material Paginator для использования данных базы данных, а не статического счетчика - PullRequest
Новая
       22

Angular Material Paginator для использования данных базы данных, а не статического счетчика

0 голосов
/ 27 сентября 2018

Я изучаю Angular и фактически анализирую Angular Material Paginator с помощью AngularMaterial Course .

На самом деле счетчик страниц mat-paginator основан на "статическом" свойстве курсаlessonsCount:

<mat-paginator [length]="course?.lessonsCount"

«база данных»: 

export const COURSES: any = {
    1: {
        id: 1,
        description: "Angular for Beginners",
        iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/a.png',
        courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/m.png',
        longDescription: "Establish ...of Angular",
        category: 'BEGINNER',
        lessonsCount: 10
    }

и 

export const LESSONS = {
    1: {
        id: 1,
        "description": "Angular Tutorial For Beginners - Bu...By Step",
        "duration": "4:17",
        "seqNo": 1,
        courseId: 1
    },
    2: {
        id: 2,
        "description": "Building Your First  Component - Component Composition",
        "duration": "2:07",
        "seqNo": 2,
        courseId: 1
    }

есть способ удалитьэто «жестко закодированное» свойство lessonsCount из класса course и использование количества уроков на основе количества уроков из БД через courseId, а не из свойства курса «уроков по урокам»?

1 Ответ

0 голосов
/ 15 ноября 2018

Код приложения: https://stackblitz.com/edit/angular-api-paginator-value?file=src/app/app.component.ts

  • В <mat-paginator [length]="course?.lessonsCount" <mat-paginator>, [length] можно привязать к свойству класса модели, как здесьв вашем случае он привязан к lessonsCount свойству course класса.
  • Или может быть привязан к любому private member variable of the component class, так что вы можете связать его с локальной переменной компонента, которая может быть обновлена ​​из длины dataArray, извлекаемой из любого попадания API.

В прилагаемом демонстрационном коде я изменился на <mat-paginator [length]="count", и это свойство счетчика обновляется из данных, извлеченных из API.Этот API вызывается нажатием кнопки и случайным образом вызывает API, который возвращает массив, и длина массива присваивается этой переменной-члену count.

Пожалуйста, прокомментируйте, если это не тактребуемый сценарий для вопроса.

...