连接功能不会触发

Question

我很新的角度2+和试图开发我的第一个应用程序。这里是我的问题： 我试图表现出的材料表我的演示数据：

HTML文件：

<div class='panel panel-primary'> 
<div class='panel-heading'> 
    {{pageTitle}} 
</div> 

<div class='panel-body'> 
    <div class="example-container mat-elevation-z8" > 

     <cdk-table #table [dataSource]="gridViewList" class="example-table"> 

      <ng-container cdkColumnDef="productId"> 
       <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell> 
       <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.productId}} </cdk-cell> 
      </ng-container> 

      <ng-container cdkColumnDef="productName"> 
       <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> name </cdk-header-cell> 
       <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.productName}} </cdk-cell> 
      </ng-container> 

      <ng-container cdkColumnDef="productCode"> 
       <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Code </cdk-header-cell> 
       <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.productCode}} </cdk-cell> 
      </ng-container> 

      <ng-container cdkColumnDef="releaseDate"> 
       <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Available</cdk-header-cell> 
       <cdk-cell *cdkCellDef="let row" class="example-cell"> 
        {{row.releaseDate}} 
       </cdk-cell> 
      </ng-container> 

      <ng-container cdkColumnDef="Price"> 
        <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Price</cdk-header-cell> 
        <cdk-cell *cdkCellDef="let row" class="example-cell"> 
         {{row.price}} 
        </cdk-cell> 
       </ng-container> 

      <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row> 
      <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row> 
     </cdk-table> 
    </div> 


</div> 

，这里是我的TS文件：

import { Component, OnInit } from '@angular/core'; 
import { DataSource } from '@angular/cdk/collections'; 
import { Observable } from 'rxjs/Observable'; 
import { GridViewService } from './grid-view.service'; 
import { Http, Response } from '@angular/http'; 
import { IGridView } from './grid-view.interface'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 

@Component({ 
    templateUrl: './grid-view.component.html', 
    styleUrls: ['./grid-view.component.css'], 
    providers: [GridViewService] 
}) 

export class GridViewComponent { 
    pageTitle: string = 'Products List'; 
    listFilter: string = ''; 
    errorMessage: string; 
    imageWidth: number = 50; 
    imageMargin: number = 2; 
    gridViewList :DataSourceComponent; 

    displayedColumns = ['productId', 'productName', 'productCode', 
      'releaseDate', 'Price']; 
    constructor(private _gridViewService: GridViewService) { 
    } 
} 


    class DataSourceComponent extends DataSource<any> { 

     private _productUrl = 'assets/data.json'; 
     constructor(private _http :Http) { 
      super(); 
     } 

     connect(): Observable<any> { 
      return this._http.get(this._productUrl) 
       .map((response: Response) => <IGridView[]>response.json()) 
       .do(data => console.log('All: ' + JSON.stringify(data))) 
       .catch(this.handleError); 
      } 

     disconnect() { } 

     private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error || 'Server error'); 
     } 
    } 

问题是，表格没有渲染和连接功能没有触发页面加载！

有人在这里，可以帮助我吗？

Answer 1

您尚未在GridViewComponent中初始化您的DataSourceComponent。你需要初始化它。

constructor(private _http: Http, _gridViewService: GridViewService) { 
} 

ngOnInit() { 
    this.gridViewList = new DataSourceComponent(this._http); 
}