각도 재질 테이블 번호 매기기

Question

각도 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 및 웹 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" 

     ], 

Answer 1

기존 데이터 소스 대신 하위 데이터 소스에 새 데이터 소스를 생성합니다. ?

1) 당신은 당신이 당신의 (아약스) getToDoList()

3) 설정 AfterViewInit 호출하는 OnInit dataSource가) new MatTableDataSource();

2의 새로운 인스턴스 인 상태 클래스를 구성의 paginator 옵션들 : 그래서 무슨 일입니다 dataSource.

4) ajax 호출이 완료되면 getToDoList()이 next 서브 스크립터를 트리거하는 dataChange를 방출합니다. 그리고 MatTableDataSource의 NEW 인스턴스가있는 this.dataSource을 재정의합니다.

저는 아직 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') 
      ); 
    }