我正在尝试将CDK数据表转换为Material Design样式的数据表(请参阅:https://material.angular.io/components/table/overview),但是当我将cdk前缀更改为md时,我收到以下错误...
未捕获错误:模板解析错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性 . 1.如果'md-header-row'是一个Angular组件并且它有'mdHeaderRowDef'输入,那么请验证它是否是该模块的一部分 . 2.如果'md-header-row'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息 . 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” .
我在网上找到的每个答案都告诉我,我需要导入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>
RESULT: So far so good ...
但如果我将"cdk"更改为"md"
<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>
<md-header-row *mdHeaderRowDef="['number', 'book']"></md-header-row>
<md-row *mdRowDef="let row; columns: ['number', 'book']"></md-row>
</md-table>
RESULT: Broken :(
我已经尝试导入其他模块......包括MdTableModule和MdTable,但这也没有证明有用 . 有任何想法吗?
附:这是我的主要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
]
3 回答
只需在app.modules.ts中添加MatTableModule即可
在角度材质中,有必要在app.modules.ts中导入模块
例如,对于paginator导入MatPaginatorModule,用于排序导入,MatSortModule
经过另一个小时的摆弄,我跑了
并将@ angular / cdk和@ angular / material更新为2.0.0-beta.10
在package.json中
这打破了一些东西,所以我不得不四处挖掘并需要更新DataSource和CdkTableModule的导入
component.html
component.ts
唷!
由于"^2.0.0-beta.11"所有以
md
开头的选择器都无效,应该替换为mat
,因此您必须更换所有这些选择器,在材料网站中,文档似乎尚未更新 .