Angular 角度材质表-错误:找不到列
我正在尝试生成一个表格,以学习如何使用Angular Material提供的表格功能,但现在我被绊倒了。我猜这是一个相当基本的东西,我只是忽略了。希望你们中的一个向导看到我做错了什么(忽略导航到其他页面部分,因为它还没有在模板中实现) 我的控制台中出现以下错误:Angular 角度材质表-错误:找不到列,angular,angular-material,angular-material-table,Angular,Angular Material,Angular Material Table,我正在尝试生成一个表格,以学习如何使用Angular Material提供的表格功能,但现在我被绊倒了。我猜这是一个相当基本的东西,我只是忽略了。希望你们中的一个向导看到我做错了什么(忽略导航到其他页面部分,因为它还没有在模板中实现) 我的控制台中出现以下错误: ERROR Error: Could not find column with id "id". .ts文件: import { Component, OnInit, ViewChild } from "@angular/core";
ERROR Error: Could not find column with id "id".
.ts文件:
import { Component, OnInit, ViewChild } from "@angular/core";
import { Router } from "@angular/router";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { metingen } from "../mocks/metingen.mock";
@Component({
selector: "app-overzicht-metingen",
template: `
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header>No.</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let element">
{{ element.datumVanDeMeting }}
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
<td mat-cell *matCellDef="let element">{{ element.producttype }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
`,
styles: []
})
export class OverzichtMetingenComponent implements OnInit {
// toevoegen van een meting
displayedColumns: string[] = ["id", "datumVanDeMeting", "producttype"];
dataSource = new MatTableDataSource(metingen);
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private router: Router) {}
ngOnInit() {
this.dataSource.sort = this.sort;
}
onSelect(id: string) {
this.router.navigate(["/inzien-meting", id]);
}
}
如果将displayedColumns设置为[“id”,…],则需要定义一个
,否则将从arraySee中删除,这是我完全忽略的。如果我将代码更改为[code]id[/code]修复了后续问题,您是否也会意外地知道为什么排序不起作用。似乎我还必须将MatSortModule导入到我的项目中。如果将displayedColumns设置为[“id”,…],则需要定义一个
,否则将从arraySee中删除,这是我完全忽略的。如果我将代码更改为[code]id[/code]修复了后续问题,您是否也会意外地知道为什么排序不起作用。似乎我还必须将MatSortModule导入到我的项目中。
import { Meting } from "../models/meting";
export const metingen: Meting[] = [
{
id: "1",
datumVanDeMeting: new Date(),
producttype: "variant A",
sensor1: [1, 2, 3],
sensor2: [2, 3, 4],
sensor3: [3, 4, 5],
sensor4: [4, 5, 6]
},
{
id: "2",
datumVanDeMeting: new Date(),
producttype: "variant B",
sensor1: [3, 2, 2],
sensor2: [4, 3, 3],
sensor3: [5, 4, 4],
sensor4: [6, 5, 5]
},
{
id: "3",
datumVanDeMeting: new Date(),
producttype: "variant A",
sensor1: [9, 2, 9],
sensor2: [8, 3, 8],
sensor3: [7, 4, 7],
sensor4: [6, 5, 6]
},
{
id: "4",
datumVanDeMeting: new Date(),
producttype: "variant B",
sensor1: [1, 4, 3],
sensor2: [2, 3, 7],
sensor3: [3, 9, 5],
sensor4: [8, 5, 6]
},
{
id: "5",
datumVanDeMeting: new Date(),
producttype: "variant A",
sensor1: [7, 3, 3],
sensor2: [2, 4, 7],
sensor3: [8, 5, 5],
sensor4: [4, 7, 9]
}
];