无法绑定到“ dataSource”，因为它不是“ table”的已知属性

我是新来的角5开发。我试图开发一个数据表与角材料使用的例子提供了这里: “ https://material.angular.io/components/table/examples”。

我得到一个错误说 Can't bind to 'dataSource' since it isn't a known property of 'table'.

enter image description here

请帮帮我。

203738 次浏览
小开

请注意，dataSource 变量没有从服务器获取数据，或者没有将 dataSource 分配给预期的数据格式。

小开
最佳答案

感谢@Jota. Toledo，我找到了创建桌子的解决方案。 工作守则如下:

组件

<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="\{\{column.id}}" *ngFor="let column of columnNames">
<mat-header-cell *matHeaderCellDef mat-sort-header> \{\{column.value}}</mat-header-cell>
<mat-cell *matCellDef="let element"> \{\{element[column.id]}}</mat-cell>
</ng-container>


<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

组件

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';


@Component({
selector: 'app-m',
templateUrl: './m.component.html',
styleUrls: ['./m.component.css'],
})
export class MComponent implements OnInit {


dataSource;
displayedColumns = [];
@ViewChild(MatSort) sort: MatSort;


/**
* Pre-defined columns list for user table
*/
columnNames = [{
id: 'position',
value: 'No.',


}, {
id: 'name',
value: 'Name',
},
{
id: 'weight',
value: 'Weight',
},
{
id: 'symbol',
value: 'Symbol',
}];


ngOnInit() {
this.displayedColumns = this.columnNames.map(x => x.id);
this.createTable();
}


createTable() {
let tableArr: Element[] = [{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
];
this.dataSource = new MatTableDataSource(tableArr);
this.dataSource.sort = this.sort;
}
}


export interface Element {
position: number,
name: string,
weight: number,
symbol: string
}

应用程序模块

imports: [
MatSortModule,
MatTableModule,
],
小开
  • 角核 V6.0.2,
  • 角质材料，v6.0.2,
  • 角 CLI v6.0.0(global v6.1.2)

我在运行 ng test时遇到了这个问题，所以为了解决这个问题，我在我的 xyz.component.spec.ts文件中添加了:

import { MatTableModule } from '@angular/material';

并将其添加到 TestBed.configureTestingModule({})的 imports部分:

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
declarations: [ BookComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));
小开

记住在你的 app.module's imports中加入 MatTableModule。

角度9 + 

import { MatTableModule } from '@angular/material/table'


@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})

小于角度9

import { MatTableModule } from '@angular/material'


@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
小开

实质性的例子是使用错误的表标记。 改变

<table mat-table></table>
<th mat-header-cell></th>
<td mat-cell></td>


<tr mat-header-row></tr>
<tr mat-row></tr>

到

<mat-table></mat-table>
<mat-header-cell></mat-header-cell>
<mat-cell></mat-cell>


<mat-header-row></<mat-header-row>
<mat-row></<mat-row>
小开

请记住导入 MatTableModule 模块并删除下面的 表格元素显示以供参考。
执行错误
< table mat-table [ dataSource ] = “ myDataArray”> ... < br > 正确执行:
< mat-table [ dataSource ] = “ myDataArray”>

小开

问题是你的角材料版本，我有相同的，我已经解决了这一点，当我已经安装了角材料在本地良好的版本。

希望也能解决你的问题。

小开

角度7

检查表组件的位置。 在我的例子中，它的位置类似于 app/share/table 组件 其中共享文件夹包含所有子组件 但是我在 Ngmodules 引进了 app.module.ts 的材料模块，这是不正确的。 在这种情况下，Materials 模块应该导入到 shared.module.ts 的 Ngmodules 而且成功了。

没有必要将“桌子”改为“垫子桌子”在角度7。

Angular7-不能绑定到 dataSource & # 39; 因为它不是一个已知的属性 & # 39;

小开

这个错误消息也让我头疼了很长时间，后来我发现我使用的是[ dataSource ]而不是[ dataSource ]。

小开

如果您的“ import { MatTableModule } from’@angle/Materials’;”位于共享模块上，请确保将其导出。

Sharedmodule.ts:

import { MatTableModule } from '@angular/material'


@NgModule({
imports: [
// ...
MatTableModule
// ...
],
exports:[ MatTableModule ]
})

然后在定制模块中定义使用材料表的组件:

Custommodule.ts:

@NgModule({
imports: [ sharedmodule ]
})
小开

在我的例子中，问题是我没有将包含数据源的组件放在 main 模块的声明中。

NgModule({
imports: [
EnterpriseConfigurationsRoutingModule,
SharedModule
],
declarations: [
LegalCompanyTypeAssignComponent,
LegalCompanyTypeAssignItemComponent,
ProductsOfferedListComponent,
ProductsOfferedItemComponent,
CustomerCashWithdrawalRangeListComponent,
CustomerCashWithdrawalRangeItemComponent,
CustomerInitialAmountRangeListComponent,
CustomerInitialAmountRangeItemComponent,
CustomerAgeRangeListComponent,
CustomerAgeRangeItemComponent,
CustomerAccountCreditRangeListComponent, //<--This component contains the dataSource
CustomerAccountCreditRangeItemComponent,
  



],

该组件包含 dataSource:

导出类 CustomerAccountCreditRangeListComponent 实现 OnInit {

  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator){
this.dataSource.paginator = paginator;
}
@ViewChild(MatSort) set sort(sort: MatSort){
this.dataSource.sort = sort;
}


dataSource = new MatTableDataSource(); //<--The dataSource used in HTML
loading: any;
resultsLength: any;
displayedColumns: string[] = ["id", "desde", "hasta", "tipoClienteNombre", "eliminar"];
data: any;


constructor(
private crud: CustomerAccountCreditRangeService,
public snackBar: MatSnackBar,
public dialog: MatDialog,
private ui: UIComponentsService
) {
}

这是角度9的

小开

如果你已经尝试了这里提到的所有东西，但是都没有用，确保你也在你的项目中添加了棱角材料。如果没有，只需在终端运行以下命令添加它:

ng add @angular/material

成功添加之后，等待项目刷新，错误将自动消失。

小开

我在 app-routing 模块中导入了 MatTableModule，错误消失了。

小开

我也有同样的问题！ 虽然我修正了将 MatTableModule 的导入添加到 mycustommodule.ts 中，而不是将其添加到 app.module.ts 中

注意: 由于我已经创建了一个自定义模块(inbox.module.ts)并在其中创建了组件，因此这些模块的声明是在 inbox.module.ts 中创建的，因此 MatTableModule 的导入应该在 inbox.module.ts 中完成，而不是在 app.module.ts 中

小开

对于那些只使用角度 CDK 而不是角度材料，而不是进口 MatTableModule进口 CdkTableModule的人:

import { CdkTableModule } from '@angular/cdk/table';


@NgModule({
imports: [
...
CdkTableModule,
...
],
小开

在我的例子中，我在应用程序模块中添加了 MatTableModule，但是我有这样的嵌套组件:

app module
|__________dashboard module
|_________________user module
|___________plans module

我在计划模块的直接父模块，也就是用户模块中加入了 MatTableModule，然后它工作了。

小开

在角度13上，我遇到了同样的问题，因为我忘记在导入 MatTableModule 的 app 模块中添加组件。

小开

我已经解决了它通过改变 [data-source]="dataSource"的 [dataSource]="dataSource"在我的 name.component.html

小开

对我来说，这个问题很奇怪，但我可以重现它，这意味着它可能发生在其他人身上。

我的角度版本是14。当我想添加材料到我的项目与 ng add @angular/material的材料版本，它想要安装，并问我是 7.0(我错过和安装无论如何)。

当我看了其他项目，他们的材料版本高得多: 14.2.6。

最后，解决这个问题的是 给出一个特定角度的材料版本的 ng add命令。您必须检查当前版本并将其添加到命令中。例如:

ng add @angular/material@14.2.6

提交答案