角度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;
}
私はhammer.jsやWeb animations.min.js角度-cli.jsonを置く角度CLIを使用しておりますので
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"
],
ありがとう – rgoal