Question

我对angular 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

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

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

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

连接功能不触发

1 个答案: