Question

我正在尝试将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未捕获错误：模板解析错误：   无法绑定到＆＃39; dataSource＆＃39;因为它不是'md-table＆＃39;的已知属性。   1.如果＆＃md-table＆＃39;是一个Angular组件，它有＆＃39; dataSource＆＃39;输入，然后验证它是否是该模块的一部分。   2.如果＆＃md-table＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。   3.允许任何财产添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34; lipsis_sm无利润＆＃34;＆gt; {{localizationService.language.MF_CHART_FOOTER_DES}}
      ] [数据源] =＆＃34;数据源＆＃34;＆GT;


＆＃39; MD-头单元＆＃39;不是一个已知的元素：   1.如果＆＃md-header-cell＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。   2.如果＆＃md-header-cell＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34;

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

可能是什么原因？

未捕获错误：模板解析错误：＆＃39; MD-按钮＆＃39;不是一个已知的元素： 1.如果＆＃md-button＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃md-button＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34;

非常感谢帮助.. !!

谢谢.. !!

Answer 1

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

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

加载md-table时出错（Angular Material Design Table）

1 个答案: