首页 文章

加载md-table时出错(Angular Material Design Table)

提问于
浏览
2

我正在尝试将Angular Material表(https://material.angular.io/components/table)集成到我的Angular应用程序中 .

我使用CLI创建了Angular App,我的表声明如下 .

<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:模板解析错误:无法绑定到'dataSource',因为它不是'md-table'的已知属性 . 1.如果'md-table'是一个Angular组件并且它有'dataSource'输入,那么请验证它是否是该模块的一部分 . 2.如果'md-table'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” . (“lipsis_sm no-margin”> {}] [dataSource] =“dataSource”>'md-header-cell'不是已知元素:1 . 如果'md-header-cell'是一个Angular组件,然后验证它是否是该模块的一部分.2 . 如果'md-header-cell'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息 . ( “

我使用了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:

我创建了一个新项目,但仍未采用材料组件 .

https://github.com/newair/Angular-Material-Test

可能是什么原因?

未捕获错误:模板解析错误:'md-button'不是已知元素:1 . 如果'md-button'是Angular组件,则验证它是否是此模块的一部分 . 2.如果'md-button'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . (”

非常感谢帮助.. !!

谢谢 ..!!

1 回答

  • 2

    确保在应用的导入中包含 MdTableModuleCdkTableModule .

    请注意 <md-button></md-button> 无效,因为 MdButton 使用属性选择器 . 相反,请尝试 <button md-button> My Button </button>

相关问题