我正在尝试将 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>
结果:到目前为止一切顺利... 但如果我将“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>
我试过导入其他模块......包括 MdTableModule 和 MdTable,但这也没有被证明有帮助。有什么想法吗?
附言这是我的主要 app.module.ts 导入语句以防万一
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 更新--保存
并将@angular/cdk 和@angular/material 更新为 2.0.0-beta.10
在 package.json
"@angular/material": "^2.0.0-beta.10",
"@angular/cdk": "^2.0.0-beta.10",
这破坏了一些东西,所以我不得不四处挖掘并需要更新 DataSource 和 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>
组件.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() {}
}
呸!
在 app.module.ts 中导入
MatTableModule
import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [
MatTableModule
]
})
export class AppModule { }
因为“^2.0.0-beta.11”所有以
md
开头的选择器都是无效的,应该用mat
替换所以你必须替换所有的选择器,在材料网站上文档似乎没有还没更新。
所有类型的表都有她自己的前缀,如果你使用一种类型,你必须使用她的前缀。这样一目了然