angular - Angular マテリアル テーブル - エラー: 列が見つかりません

Question

Angular Material が提供するテーブル機能の使用方法を学習するためにテーブルを生成しようとしていますが、現在行き詰っています。私が見落としているのはかなり基本的なものだと思います。ウィザードの 1 人が私が間違っていることを理解してくれることを願っています (テンプレートにはまだ実装されていないため、他のページ パーツへの移動は無視してください)。

コンソールに次のエラーが表示されます。

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]);
  }
}

モックされたデータを含む私のファイル:

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]
  }
];