角度材料表错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性
我试图将CDK数据表转换为Material Design样式的数据表,表(见:https://material.angular.io/components/table/overview),但是当我改变CDK前缀MD,我得到以下错误...角度材料表错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性
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
]
的东西摆弄的一个小时后,我跑了
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() {}
}
唷!
请接受您的回答,以便其他人也可以在遇到类似问题时获益 – Faisal
因为“^ 2.0.0-beta.11”所有以md
开头的选择器都无效,因此应该用mat
替换,因此您必须替换所有这些选择器,在材料网站中文档似乎不是更新了。
材料是哪一个版本? – Faisal
我明白了! –
我更新为“@ angular/material”:“^ 2.0.0-beta.10”,并将DataSource导入改为:从'@ angular/cdk/table'导入{DataSource},并将CdkTableModule导入到:import {CdkTableModule } from'@ angular/cdk/table'...唉,它的工作原理! –