Angular Material Paginator使用数据库数据，而不是静态计数器

Question

我正在学习Angular并实际使用AngularMaterial Course分析Angular Material Paginator。

实际上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属性，并使用基于db通过courseId的课程计数的课程数量，而不是课程属性“lessonsCount”？

Answer 1

应用代码：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

  ，因此您可以将其与本地组件变量绑定，该变量可以从从任何api命中获取的dataArray长度更新。

在附带的演示代码中，我已经更改为<mat-paginator [length]="count"，并且此count属性是从api提取的数据更新的。从按钮单击调用该api，并随机调用返回数组的api，并将数组的长度分配给此成员变量count。

如果这不是问题的必要方案，请发表评论。