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属性，并根据通过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]可以绑定到模型类的属性，就像您的情况一样，它绑定到{ {1}}类。
或者，可以绑定到任何lessonsCount，因此您可以将其与本地组件变量绑定，可以从从任何 api命中。

在所附的演示代码中，我已更改为course，并且此count属性是根据从api获取的数据进行更新的。通过单击按钮即可调用该api，并随机调用返回一个数组的api，并将数组的长度分配给该成员变量private member variable of the component class。

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

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

1 个答案: