MD-表角材料2不工作

Question

我只是想使用角材料测试2.0.0 beta.8新推出的数据表，但我不能让它的工作，因为我坚持了这个错误：

ERROR TypeError: Cannot read property 'columnsChange' of undefined 
at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable.ngAfterContentInit (cdk.es5.js:1950) 
at callProviderLifecycles (core.es5.js:11174) 
at callElementProvidersLifecycles (core.es5.js:11155) 
at callLifecycleHooksChildrenFirst (core.es5.js:11139) 
at checkAndUpdateView (core.es5.js:12239) 
at callViewAction (core.es5.js:12601) 
at execEmbeddedViewsAction (core.es5.js:12559) 
at checkAndUpdateView (core.es5.js:12237) 
at callViewAction (core.es5.js:12601) 
at execComponentViewsAction (core.es5.js:12533) 
at checkAndUpdateView (core.es5.js:12242) 
at callViewAction (core.es5.js:12601) 
at execEmbeddedViewsAction (core.es5.js:12559) 
at checkAndUpdateView (core.es5.js:12237) 
at callViewAction (core.es5.js:12601) 

我进口都MdTableModule和CdkTableModule到我的应用程序的模块。

的DataSource实现是这样的：

import {OnInit, Component} from "@angular/core"; 
import {SetupSummaryService} from "./setupSummaryService"; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 
import {Observable} from 'rxjs/Observable'; 
import {DataSource} from "@angular/cdk"; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 


@Component({ 
    templateUrl: 'setupSummary.component.html', 
    styleUrls: ['setupSummary.component.scss'], 
    providers: [SetupSummaryService] 
}) 

export class SetupSummaryComponent implements OnInit { 

    displayedColumns = ['userId', 'userName', 'progress', 'color']; 
    exampleDatabase = new ExampleDatabase(); 
    dataSource: ExampleDataSource | null; 
    constructor() { 
    } 

    ngOnInit(): void { 
     this.dataSource = new ExampleDataSource(this.exampleDatabase); 

    } 

} 
/** Constants used to fill up our data base. */ 
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 
    'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; 
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 
    'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', 
    'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; 

export interface UserData { 
    id: string; 
    name: string; 
    progress: string; 
    color: string; 
} 
/** An example database that the data source uses to retrieve data for the table. */ 
export class ExampleDatabase { 
    /** Stream that emits whenever the data has been modified. */ 
    dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]); 
    get data(): UserData[] { return this.dataChange.value; } 

    constructor() { 
    // Fill up the database with 100 users. 
    for (let i = 0; i < 100; i++) { this.addUser(); } 
    } 

    /** Adds a new user to the database. */ 
    addUser() { 
    const copiedData = this.data.slice(); 
    copiedData.push(this.createNewUser()); 
    this.dataChange.next(copiedData); 
    } 

    /** Builds and returns a new User. */ 
    private createNewUser() { 
    const name = 
     NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + 
     NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; 

    return { 
     id: (this.data.length + 1).toString(), 
     name: name, 
     progress: Math.round(Math.random() * 100).toString(), 
     color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] 
    }; 
    } 
} 

/** 
* Data source to provide what data should be rendered in the table. Note that the data source 
* can retrieve its data in any way. In this case, the data source is provided a reference 
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage 
* the underlying data. Instead, it only needs to take the data and send the table exactly what 
* should be rendered. 
*/ 
export class ExampleDataSource extends DataSource<any> { 
    constructor(private _exampleDatabase: ExampleDatabase) { 
    super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<UserData[]> { 
    return this._exampleDatabase.dataChange; 
    } 

    disconnect() {} 
} 

，这里是我的HTML模板：

<md-table [dataSource]="dataSource"> 

    <!--- Note that these columns can be defined in any order. 
     The actual rendered columns are set as a property on the row definition" --> 

    <!-- ID Column --> 
    <ng-container cdkColumnDef="userId"> 
    <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container cdkColumnDef="progress"> 
    <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container cdkColumnDef="userName"> 
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container cdkColumnDef="color"> 
    <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
    <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell> 
    </ng-container> 

</md-table> 

我按照网址https://material.angular.io/components/table/overview

为指导，以实现这一点。

Answer 1

您有以下行添加到您的html文件：

<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 

使您html文件看起来像这样：

<md-table [dataSource]="dataSource"> 
    <!--- Note that these columns can be defined in any order. 
    The actual rendered columns are set as a property on the row definition" - 
    -> 
    <!-- ID Column --> 
    <ng-container cdkColumnDef="userId"> 
    <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container cdkColumnDef="progress"> 
    <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container cdkColumnDef="userName"> 
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
    <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container cdkColumnDef="color"> 
    <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
    <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} 
    </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
</md-table> 

Plunker