缺少页眉、页脚和行的定义;无法确定应呈现哪些列 - Angular Material Table
Missing definitions for header, footer, and row; cannot determine which columns should be rendered - Angular Material Table
我正在使用 Angular 9.0.4 和 @angular/material 9.1.3,我想展示一个基本的 material table:
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
<!-- name -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<!-- code -->
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>Code</th>
<td mat-cell *matCellDef="let element"> {{ element.code }} </td>
</ng-container>
</table>
我在 app.module.ts 中导入了这个:
import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [
MatTableModule,
],
})
在我的 component.ts:
export class DevizaListComponent implements OnInit {
devizas: DevizaInterface[] = [
{
name: 'dollar',
code: 'USD' ,
}
];
constructor() { }
ngOnInit() { }
}
现在我在浏览器中收到此错误消息:
Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered.
at getTableMissingRowDefsError (table.js:996)
at MatTable.push../node_modules/@angular/cdk/ivy_ngcc/fesm5/table.js.CdkTable.ngAfterContentChecked (table.js:1296)
官方文档没有说明任何相关内容。有什么想法吗?
试试这个!
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
....
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
您在 html
代码中缺少以下行:
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
在 component.ts 文件中创建一个列定义如下的数组:
columndefs : any[] = ['name','code'];
更新 table 代码如下:
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>Code</th>
<td mat-cell *matCellDef="let element"> {{ element.code }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
</table>
这是演示:demo
我正在使用 Angular 9.0.4 和 @angular/material 9.1.3,我想展示一个基本的 material table:
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
<!-- name -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<!-- code -->
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>Code</th>
<td mat-cell *matCellDef="let element"> {{ element.code }} </td>
</ng-container>
</table>
我在 app.module.ts 中导入了这个:
import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [
MatTableModule,
],
})
在我的 component.ts:
export class DevizaListComponent implements OnInit {
devizas: DevizaInterface[] = [
{
name: 'dollar',
code: 'USD' ,
}
];
constructor() { }
ngOnInit() { }
}
现在我在浏览器中收到此错误消息:
Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered. at getTableMissingRowDefsError (table.js:996) at MatTable.push../node_modules/@angular/cdk/ivy_ngcc/fesm5/table.js.CdkTable.ngAfterContentChecked (table.js:1296)
官方文档没有说明任何相关内容。有什么想法吗?
试试这个!
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
....
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
您在 html
代码中缺少以下行:
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
在 component.ts 文件中创建一个列定义如下的数组:
columndefs : any[] = ['name','code'];
更新 table 代码如下:
<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element"> {{ element.name }} </td>
</ng-container>
<ng-container matColumnDef="code">
<th mat-header-cell *matHeaderCellDef>Code</th>
<td mat-cell *matCellDef="let element"> {{ element.code }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columndefs"></tr>
<tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
</table>
这是演示:demo