MatPaginator가 동적으로 생성 된 테이블에서 작동하지 않습니다.

Question

나는 데이터를 동적으로 생성하고이를 데이터 테이블에 표시하고 있지만, MatPaginator와 데이터 테이블을 연결할 수 없습니다. 데이터가 표에 표시됩니다.

sCollectionList = null; 
    dataSource = new MatTableDataSource<object>(this.sCollectionList); 
    displayedColumns: string[] = []; 

    // SCollectionService Holds my custom HTTP methods // 
    constructor(private stColServ: SCollectionService) { 
    } 


// Calling it when a Button from UI is clicked // 
    submitFilter() { 

    // stFilter is a valid objet which is getting passed to my custom post request// 
    this.stColServ.stationFilter(this.stFilter).subscribe(
     data => { 
     this.sCollectionList = data; 

     this.displayedColumns = ['System Data' , 'Product Identifer' , 'Collected Date' , 'No Stations ?' , 'No Smnp ?', 'Export']; 
this.dataSource.data = this.sCollectionList; 

//  this.streamOfDataUpdates.subscribe(newData => this.dataSource.data = this.sCollectionList); 
     this.dataSource.paginator = this.paginator; 
     }, 
    ); 

    } 


    @ViewChild(MatPaginator) paginator: MatPaginator; 

    /** 
    * Set the paginator after the view init since this component will 
    * be able to query its view for the initialized paginator. 
    */ 
ngAfterViewInit() { 
     this.dataSource.paginator = this.paginator; 
    } 

내가 UI에 매기기를 볼 수 있어요,하지만 완전히 응답하지 않는 : 샘플 코드입니다 다음 (또한 부착).

[{ 
"productIdentifier":"365", 
"snmpFlagOn":false, 
"collectedData":"ahsgabbs s[lsnnspm] n", 
"noIpStations":true, 
"collectionDate":1511721000000 
}] 

암 :

<div style="margin-left: 30px;" class="example-container mat-elevation-z8 col-md-6 col-md-offset-3"> 

      <mat-table #table [dataSource]="dataSource"> 
      <ng-container matColumnDef="System Data"> 
      <mat-header-cell fxFlex="200px" 
       *matHeaderCellDef> System Data </mat-header-cell> 
      <mat-cell 
       *matCellDef="let station"> <textarea readonly rows="8" 
       wrap='off' show-tail> {{station['collectedData']}}</textarea> </mat-cell> </ng-container> 
      <ng-container 
       matColumnDef="Product Identifer"> <mat-header-cell 
       *matHeaderCellDef>Product Identifer</mat-header-cell> <mat-cell 
       *matCellDef="let station"> {{station.productIdentifier}} 
      </mat-cell> </ng-container> 
      <ng-container matColumnDef="Collected Date"> <mat-header-cell 
       *matHeaderCellDef>Collected Date</mat-header-cell> <mat-cell 
       *matCellDef="let station"> {{station.collectionDate}} </mat-cell> </ng-container> 
      <ng-container 
       matColumnDef="No Stations ?"> <mat-header-cell 
       *matHeaderCellDef>No Stations ?</mat-header-cell> <mat-cell 
       *matCellDef="let station"> {{station.noIpStations}} </mat-cell> </ng-container> 
      <ng-container 
       matColumnDef="No Smnp ?"> <mat-header-cell 
       *matHeaderCellDef>No Smnp ?</mat-header-cell> <mat-cell 
       *matCellDef="let station"> {{station.snmpFlagOn}} </mat-cell> </ng-container> 
      <ng-container 
       matColumnDef="Export"> <mat-header-cell 
       *matHeaderCellDef> Export </mat-header-cell> <mat-cell 
       *matCellDef="let station"> 
      <button 
       (click)="downloadCSV(station.productIdentifier,station.collectedData)">Export 
       CSV</button> 
      </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 *ngIf="sCollectionList" class="marginless-paginator-range-label" 
       #paginator 
       [pageIndex]="0" 
       [pageSize]="5" 
       [pageSizeOptions]="[5, 10, 20]"> </mat-paginator> 

     </div> 

따라 난`이 UI에 표시하려고 무엇을 내가받을 배열 응답한다 : 표에 데이터를 표시 내 샘플 HTML MatTable 코드가됩니다 다음 나는 아무것도 놓쳤다 ??

Answer 1

mat-paginator 태그에서 ngIf 속성을 제거해보십시오. 사용하는 동안 같은 종류의 문제가 발생했습니다. 그러나 두 번째 또는 그 이후로 테이블을 다시 새로 고칠 때 맞춤 길이 값이 작동하지 않을 수 있습니다.