我正在尝试将 Angular Material 表 ( https://material.angular.io/components/table ) 集成到我的 Angular 应用程序中。
我已经使用 CLI 创建了 Angular 应用程序,我的表声明如下。
<md-table #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>
并已启动如下..
public onInit(): void {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
但是我收到以下错误..
compiler.es5.js:1690 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'md-table'. 1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module. 2. If 'md-table' 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. ("lipsis_sm no-margin">{{localizationService.language.MF_CHART_FOOTER_DES}}
][dataSource]="dataSource">'md-header-cell' is not a known element: 1. If 'md-header-cell' is an Angular component, then verify that it is part of this module. 2. If 'md-header-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
我用过this plunker 帮助我进行集成。
可能是什么原因?
我使用了以下依赖项..
"@angular/animations": "^4.3.0",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.0",
"@angular/compiler": "^4.3.0",
"@angular/core": "^4.3.0",
"@angular/forms": "^4.2.6",
"@angular/http": "^4.2.6",
"@angular/material": "^2.0.0-beta.8",
感谢您的帮助..
谢谢!
编辑1:
我创建了一个新项目,但仍然没有采用 Material 组件。
https://github.com/newair/Angular-Material-Test
可能是什么原因?
Uncaught Error :模板解析错误: “md-button”不是已知元素: 1. 如果“md-button”是 Angular 组件,则验证它是否是该模块的一部分。 2. 如果“md-button”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。 (“
非常感谢您的帮助..!!
谢谢..!!
最佳答案
确保包含MdTableModule
和CdkTableModule
在您的应用程序的导入中。
请注意<md-button></md-button>
无效,因为 MdButton
使用属性选择器。相反,尝试 <button md-button> My Button </button>
关于angular - 加载 md-table( Angular Material 设计表)时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45166145/