2017-12-18 22 views
0

角度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" 

     ], 

答えて

1

既存のデータソースを使用する代わりに、サブデータ・ソースに新しいデータ・ソースを作成しています。だから何が起こるです:?あなたを呼び出すのOnInitあなたはdataSourcenew MatTableDataSource();

2の新しいインスタンスであることでクラスを構築

1))(アヤックス)getToDoList()

3)のpaginatorオプションだ設定AfterViewInitデータソース

4)ajax呼び出しが終了しました。getToDoList()は、nextサブスクリプターをトリガーするdataChangeを送出します。そして、これはthis.dataSourceより新しいインスタンスがMatTableDataSourceに優先します。

私はまだMatTabeDataSourceと働いていません。そしてそれはドキュメントにもなっていませんが、私は解決策を見つけました。

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

ありがとう – rgoal

関連する問題