我是Angular 5开发的新手。我正在尝试使用此处提供的示例使用角材料开发数据表:“ https://material.angular.io/components/table/examples ”。
我说错了 Can't bind to 'dataSource' since it isn't a known property of 'table'.
请帮忙。
我是Angular 5开发的新手。我正在尝试使用此处提供的示例使用角材料开发数据表:“ https://material.angular.io/components/table/examples ”。
我说错了 Can't bind to 'dataSource' since it isn't a known property of 'table'.
请帮忙。
mat-table
标签的工作示例吗?
Answers:
记得添加MatTableModule
你的app.module's imports
ie
import { MatTableModule } from '@angular/material/table'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material/table';
工作
感谢@ Jota.Toledo,我找到了创建表的解决方案。请在下面找到工作代码:
component.html
<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>
component.ts
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
}
app.module.ts
imports: [
MatSortModule,
MatTableModule,
],
我在运行时遇到了这个问题ng test
,因此要解决此问题,我将其添加到了xyz.component.spec.ts
文件中:
import { MatTableModule } from '@angular/material';
并将其添加到以下imports
部分TestBed.configureTestingModule({})
:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
declarations: [ BookComponent ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));
如果您是“从'@ angular / material'导入{MatTableModule};“ 在共享模块上,请确保将其导出。
sharedmodule.ts:
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
],
exports:[ MatTableModule ]
})
然后在您的自定义模块上,在其中定义使用物料表的组件:
custommodule.ts:
@NgModule({
imports: [ sharedmodule ]
})
对于Angular 7
检查表组件在哪里。就我而言,它的位置类似于app / shared / tablecomponent,其中共享文件夹包含所有子组件,但是我在app.module.ts的Ngmodules中导入了材料模块,这是不正确的。在这种情况下,应将Material模块导入shared.module.ts的Ngmodules中,并且可以正常工作。
无需将角度7中的“桌子”更改为“垫子桌子”。
我也很长时间因这个错误消息而烦恼,后来我发现我使用的是[数据源]而不是[数据源]。
问题是您的角材版本,我也一样,当我在本地安装好角材版本时,我已经解决了这个问题。
希望它也能解决您的问题。
记住要导入MatTableModule模块,并删除下面显示的table元素以供参考。
错误的实现
<table mat-table [dataSource]=”myDataArray”>
...
</table>
正确的实现:
<mat-table [dataSource]="myDataArray">
</mat-table>
请查看您的dataSource varibale无法从服务器获取数据,或者未将dataSource分配给期望的数据格式。
table
,只是使用<mat-table #table [dataSource]...>