0

我正在学习 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并使用基于来自数据库的课程数量的课程数量courseId，而不是来自课程属性“课程数量”？

4

1 回答 1

0

应用程序代码： https ://stackblitz.com/edit/angular-api-paginator-value?file=src/app/app.component.ts

  • 在 <mat-paginator [length]="course?.lessonsCount", <mat-paginator>,[length] 可以绑定到模型类的属性，就像在您的情况下，它绑定到类的lessonsCount属性course。
  • 或者，可以绑定到 any private member variable of the component class，因此您可以将其与本地组件变量绑定，该变量可以从从任何 api 命中获取的 dataArray 长度进行更新。

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

如果这不是问题所需的场景，请发表评论。

于 2018-11-15T07:57:19.260 回答