Question

我正在使用Angular CLI材质表分页。无论出于何种原因它都无法运作。我在ngAfterViewInit中记录了一条消息，并且能够看到警报。

HTML

<mat-table #table [dataSource]="dataSource">
                        <ng-container matColumnDef="Comment">
                            <mat-header-cell *matHeaderCellDef> Commment </mat-header-cell>
                            <mat-cell *matCellDef="let row"> {{row.Comment}} </mat-cell>
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
                        <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
                    </mat-table>
                    <mat-paginator #paginator
                                   [pageSize]="10"
                                   [pageSizeOptions]="[5, 10, 20]">
                    </mat-paginator>

component.ts

import { Component, OnInit, Input, Output,NgModule,ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
    selector: 'dashboard',
    moduleId: module.id,
    templateUrl: 'dashboard.component.html'


})


    export class DashboardComponent implements OnInit {

        dataSource = new MatTableDataSource();
        @ViewChild(MatPaginator) paginator: MatPaginator;


        displayedColumns = ['Comment'];

        ngOnInit(): void {
            this.GetToDoList(this.userID);

        }

        GetToDoList(PNSLUID: string) {
            this._dashboardService.getToDoList(PNSLUID)
                .subscribe(
                data => {
                  //  this.toDoList = data.result;
                    this.dataSource = new MatTableDataSource(data.result);
                      },
                error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
        }


                ngAfterViewInit() {

            this.dataSource.paginator = this.paginator;
        }

因为我使用的是角度cli我把hammer.js和web-animations.min.js angular-cli.json

angular-cli.json
     "scripts": [
        "scripts/jquery-1.10.2.min.js",
        "scripts/jquery-migrate-1.2.1.min.js",
        "scripts/jquery-ui.js",
        "scripts/bootstrap.min.js",
        "scripts/hammer.js",
        "scripts/web-animations.min.js"

      ],

Answer 1

您正在下标中创建新数据源，而不是使用现有数据源。那么会发生什么：

1）您构建的类dataSource是new MatTableDataSource();

的新实例

2）OnInit你打电话给你（ajax？）getToDoList()

3）AfterViewInit设置了dataSource的paginator选项。

4）ajax调用结束，getToDoList()发出dataChange，触发next下标。这将使用this.dataSource的新实例覆盖MatTableDataSource。

我自己还没有和MatTabeDataSource合作过。它甚至没有进入文档，但我在readme中找到了解决方案：

    GetToDoList(PNSLUID: string) {
        this._dashboardService.getToDoList(PNSLUID)
            .subscribe(
                data => {
                    this.dataSource.data = data.result;
                },
                error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger')
            );
    }

角度材料表分页

1 个答案: