加载 md 表时出错（Angular 材料设计表）答案

【问题标题】：Error while loading md-table (Angular Material Design Table)加载 md 表时出错（Angular 材料设计表）
【发布时间】：2017-12-23 06:49:07
【问题描述】：

我正在尝试将 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 未捕获错误：模板解析错误：无法绑定到“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">{{localizationService.language.MF_CHART_FOOTER_DES}}
][数据源]="数据源">
'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”以禁止显示此消息。 ("

非常感谢您的帮助..!!

谢谢..!!

【问题讨论】：

你导入数据源了吗？喜欢import {DataSource} from '@angular/cdk';
您介意分享您组件的其余 ts 代码吗？你可能错过了什么
我已在原始帖子中进行了编辑 1。似乎我在新项目中也遇到了同样的错误。
所以现在的问题是 md-button 应该像这样使用：<button md-button>foo</button>，而不是<md-button></md-button>。希望这会有所帮助！
感谢安娜，这是我的错。问题是我在子模块（导入到 app.module 的其他模块）使用的组件中使用了它们。而且我只将它们导入到根 app.module。

标签： angular typescript material-design

【解决方案1】：

确保在应用的导入中包含 MdTableModule 和 CdkTableModule。

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

【讨论】：

谢谢安德鲁。你的回答对我有帮助。