角度材料表错误：无法绑定到'mdHeaderRowDef'，因为它不是'md-header-row'的已知属性

Question

我试图将CDK数据表转换为Material Design样式的数据表，表（见：https://material.angular.io/components/table/overview），但是当我改变CDK前缀MD，我得到以下错误...

---

Uncaught Error: Template parse errors: Can't bind to 'mdHeaderRowDef' since it isn't a known property of 'md-header-row'. 1. If 'md-header-row' is an Angular component and it has 'mdHeaderRowDef' input, then verify that it is part of this module. 2. If 'md-header-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

---

我在网上找到的每一个答案，告诉我，我需要导入CdkTableModule，但我已经这样做& cdk表格完美工作。

import {Component, OnInit, ViewChild} from '@angular/core'; 
import {DataSource} from '@angular/cdk'; 
import { CdkTableModule } from '@angular/cdk'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/first'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/observable/interval'; 
import 'rxjs/add/operator/map'; 

我进口CdkTableModule，当我使用CDK前缀，如预期的那样表显示...

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

    <ng-container cdkColumnDef="number"> 
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell> 
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell> 
    </ng-container> 

    <ng-container cdkColumnDef="book"> 
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell> 
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: ['number', 'book']"></md-row> 
</md-table> 

结果：到目前为止好 ... 但如果我改变 “CDK” 为 “MD”

结果：布洛克恩:(

我试着导入其他模块......包括MdTableModule & MdTable，但是这并没有被证明有益的要么。有任何想法吗？

P.S.这是我的主要app.module.ts import语句的情况下，帮助

imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
AppRoutingModule, 
ReactiveFormsModule, 
BrowserAnimationsModule, 
MdAutocompleteModule, 
MdButtonModule, 
MdButtonToggleModule, 
MdCardModule, 
MdCheckboxModule, 
MdChipsModule, 
MdTableModule, 
MdDatepickerModule, 
MdDialogModule, 
MdExpansionModule, 
MdGridListModule, 
MdIconModule, 
MdInputModule, 
MdListModule, 
MdMenuModule, 
MdCoreModule, 
MdPaginatorModule, 
MdProgressBarModule, 
MdProgressSpinnerModule, 
MdRadioModule, 
MdRippleModule, 
MdSelectModule, 
MdSidenavModule, 
MdSlideToggleModule, 
MdSliderModule, 
MdSnackBarModule, 
MdSortModule, 
MdTabsModule, 
MdToolbarModule, 
MdTooltipModule, 
MdNativeDateModule, 
CdkTableModule, 
StyleModule 
] 

Answer 1

的东西摆弄的一个小时后，我跑了

npm update --save

和更新@角/ CDK和@角/材料2.0.0 beta.10

中的package.json

"@angular/material": "^2.0.0-beta.10", 
"@angular/cdk": "^2.0.0-beta.10", 

这打破了一些事情，所以我不得不挖过来，需要更新数据源和CdkTableModule

 import { CdkTableModule} from '@angular/cdk/table'; 
     import {DataSource} from '@angular/cdk/table'; 

component.html

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

    <ng-container mdColumnDef="number"> 
     <md-header-cell *mdHeaderCellDef> number </md-header-cell> 
     <md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell> 
    </ng-container> 

    <ng-container mdColumnDef="book"> 
     <md-header-cell *mdHeaderCellDef> book </md-header-cell> 
     <md-cell *mdCellDef="let element"> {{element.book}} </md-cell> 
    </ng-container> 

    <ng-container mdColumnDef="s1"> 
     <md-header-cell *mdHeaderCellDef> S1 </md-header-cell> 
     <md-cell *mdCellDef="let element"> {{element.sections[0] ? element.sections[0].type : ''}} {{element.sections[0] && element.sections[0].qs ? '('+element.sections[0].qs.length+')' : ''}}</md-cell> 
    </ng-container> 

    <ng-container mdColumnDef="s2"> 
     <md-header-cell *mdHeaderCellDef> S2 </md-header-cell> 
     <md-cell *mdCellDef="let element"> {{element.sections[1] ? element.sections[1].type : ''}} {{element.sections[1] && element.sections[1].qs ? '('+element.sections[1].qs.length+')' : ''}} </md-cell> 
    </ng-container> 

    <ng-container mdColumnDef="s3"> 
     <md-header-cell *mdHeaderCellDef> S3 </md-header-cell> 
     <md-cell *mdCellDef="let element"> {{element.sections[2] ? element.sections[2].type : ''}} {{element.sections[2] && element.sections[2].qs ? '('+element.sections[2].qs.length+')' : ''}}</md-cell> 
    </ng-container> 

    <ng-container mdColumnDef="s4"> 
     <md-header-cell *mdHeaderCellDef> S4 </md-header-cell> 
     <md-cell *mdCellDef="let element"> {{element.sections[3] ? element.sections[3].type : ''}} {{element.sections[3] && element.sections[3].qs ? '('+element.sections[3].qs.length+')' : ''}}</md-cell> 
    </ng-container> 

    <md-header-row *mdHeaderRowDef="['number', 'book', 's1', 's2', 's3', 's4']"></md-header-row> 
    <md-row *mdRowDef="let row; columns: ['number', 'book', 's1', 's2', 's3', 's4']"></md-row> 
    </md-table> 

进口

component.ts

import {Component, OnInit} from '@angular/core'; 

// Data Table imports. 
    import { DataSource } from '@angular/cdk/table'; 
    import { Observable } from 'rxjs/Observable'; 
    import 'rxjs/add/observable/of'; 

@Component({ 
    selector: 'app-start', 
    templateUrl: './start.component.html', 
    styleUrls: ['./start.component.css'] 
}) 
export class StartComponent implements OnInit { 

    pts: Pt[]; 
    dataSource = new ExampleDataSource(this.ptService); 
    constructor(public ptService: PtService) { } 
    ngOnInit() { 
    this.pt = this.ptService.getPts(); 
    } 
} 

export class ExampleDataSource extends DataSource<any> { 
    data = this.ptService.getPts(); 
    constructor(public ptService: PtService) { super() } 
    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<Pt[]> { 
    return Observable.of(this.data); 
    } 
    disconnect() {} 
} 

唷！

Answer 2

因为“^ 2.0.0-beta.11”所有以md开头的选择器都无效，因此应该用mat替换，因此您必须替换所有这些选择器，在材料网站中文档似乎不是更新了。