Angular material Error in HTML for mat-table

Question

I'm getting the following error:

ERROR TypeError: Cannot read property 'template' of undefined at MatRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate

My.html file is:

<mat-checkbox (change)="switchEvent($event)" labelPosition ="before">Show correctly invoiced shipments</mat-checkbox>

<table mat-table [dataSource]="dataSource">

  <!--Shipment reference-->
  <ng-container matColumnDef="shipmentReference">
    <th mat-header-cell *matHeaderCellDef> Reference </th>
    <td  mat-cell *matCelDeff="let shipment">{{shipment.shipmentReference}}</td>
  </ng-container>

  <!--Invoice reference-->
  <ng-container matColumnDef="invoiceReference">
    <th mat-header-cell *matHeaderCellDef>Invoice reference</th>
    <td mat-cell *matCelDeff="let shipment">{{shipment.invoiceReference}}</td>
  </ng-container>

<!--Invoiced Columns-->
<ng-container matColumnDef="invoicedCustomsClearance">
  <th mat-header-cell *matHeaderCellDef> Customs cleance costs </th>
  <td mat-cell *matCellDef="let shipment"> {{shipment.invoicedCosts.customsClearanceCosts}} </td>
</ng-container>

<!--Expected Columns-->
<ng-container matColumnDef="expectedCustomsClearance">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let shipment"> {{shipment.ExpectedCosts.customsClearanceCosts}} </td>
</ng-container>

<!--Invoiced or expected columns-->
<ng-container matColumnDef="invoicedLabel">
  <th mat-header-cell *matHeaderCellDef> Invoiced or expected </th>


  <td mat-cell *matCellDef="let shipment"> Invoiced </td>
</ng-container>

<ng-container matColumnDef="expectedLabel">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let shipment" style="background-color:rgb(241, 241, 241);"> Expected </td>
</ng-container>

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

</table>

My component.ts file looks like this:

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import {  BuyersConsoleTableService } from './buyers-console-table.service'

@Component({
  selector: 'app-buyers-console-table',
  templateUrl: './buyers-console-table.component.html',
  styleUrls: ['./buyers-console-table.component.scss']
})

export class BuyersConsoleTableComponent implements OnInit {

  dataSource = new MatTableDataSource();

  showCorrectShipments: boolean = false;

  completeShipments: any =[];

  headersShipments = ["shipmentReference", "invoiceReference", "invoicedLabel", "expectedLabel", "invoicedCustomsClearance", "expectedCustomsClearance"]

  constructor(private buyerConsoleTableService: BuyersConsoleTableService) { 

  }

  ngOnInit() {
    if(this.showCorrectShipments == false){
      this.buyerConsoleTableService.getCompleteAndIncorrectShipments().subscribe(data => {
        this.completeShipments = data;
        this.dataSource.data = this.completeShipments;
      });
    } else {
      this.buyerConsoleTableService.getCompleteAndCorrectShipments().subscribe(data => {
        this.completeShipments = data;
        this.dataSource.data = this.completeShipments
      });
    }
  }

  switchEvent(){
    if(this.showCorrectShipments == false){
      this.showCorrectShipments = true;
    } else {
      this.showCorrectShipments = false;
    }
    this.ngOnInit();
  }
}

When I open all the frames in the error, I can see that the errors are on the lines

this.buyerConsoleTableService.getCompleteAndIncorrectShipments().subscribe(data => {

and

this.dataSource.data = this.completeShipments;

My service class looks like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Shipment } from './shipment';

@Injectable()

export class BuyersConsoleTableService {

  constructor(private http: HttpClient) { }

  getCompleteAndIncorrectShipments(): Observable<Shipment[]>{
    return this.http.get<Shipment[]>('http://localhost:8080//getCompleteAndIncorrectShipments');
  }

  getCompleteAndCorrectShipments(): Observable<Shipment[]>{
    return this.http.get<Shipment[]>('http://localhost:8080//getCompleteAndCorrectShipments');
  }
}

And get data in the following format:

[
    {
        "shipmentReference": "testshipment",
        "invoiceReference": "109554 (20000678)",
        "invoicedCosts": {
            "customsClearanceCosts": 0.0,
            "prepaidCustomsDuties": 0.0,
            "provisionPrePaidDuties": 0.0,
            "extraHsCode": 0.0,
            "flegtSurcharge": 0.0,
            "deliveryOrder": 0.0,
            "lastmileCtvrede": 0.0,
            "inspectionCharges": 0.0,
            "lspsInvoiced": 0.0,
            "totalInvoiced": 0.0
        },
        "ExpectedCosts": {
            "customsClearanceCosts": 66.0,
            "prepaidCustomsDuties": 0.0,
            "provisionPrePaidDuties": 0.0,
            "extraHsCode": 0.0,
            "flegtSurcharge": 55.0,
            "deliveryOrder": 42.5,
            "lastmileCtvrede": 0.0,
            "inspectionCharges": 0.0,
            "lspsInvoiced": 17.0,
            "totalInvoiced": 500.0
        }
    },
    {
        "shipmentReference": "testshipment1",
        "invoiceReference": "109554 (20000678)",
        "invoicedCosts": {
            "customsClearanceCosts": 0.0,
            "prepaidCustomsDuties": 0.0,
            "provisionPrePaidDuties": 0.0,
            "extraHsCode": 0.0,
            "flegtSurcharge": 0.0,
            "deliveryOrder": 0.0,
            "lastmileCtvrede": 0.0,
            "inspectionCharges": 0.0,
            "lspsInvoiced": 0.0,
            "totalInvoiced": 0.0
        },
        "ExpectedCosts": {
            "customsClearanceCosts": 69.0,
            "prepaidCustomsDuties": 0.0,
            "provisionPrePaidDuties": 0.0,
            "extraHsCode": 0.0,
            "flegtSurcharge": 55.0,
            "deliveryOrder": 40.0,
            "lastmileCtvrede": 94.0,
            "inspectionCharges": 15.0,
            "lspsInvoiced": 15.0,
            "totalInvoiced": 500.0
        }
    }
]

And then assgings it to the following interface:

export interface Shipment {
    
    shipmentReference: string,
    invoiceReference: string,
    invoicedCosts: {
        customsClearanceCosts: number,
        prepaidCustomsDuties: number,
        provisionPrePaidDuties: number,
        extraHsCode: number,
        flegtSurcharge: number,
        deliveryOrder: number,
        lastmileCtvrede: number,
        inspectionCharges: number,
        lspsInvoiced: number,
        totalInvoiced: number
    },
    ExpectedCosts: {
        customsClearanceCosts: number,
        prepaidCustomsDuties: number,
        provisionPrePaidDuties: number,
        extraHsCode: number,
        flegtSurcharge: number,
        deliveryOrder: number,
        lastmileCtvrede: number,
        inspectionCharges: number,
        lspsInvoiced: number,
        totalInvoiced: number
    }
}

I've copied this way of working from an other component in where it works correctly. I do not know why I'm getting this issue and I can't find a solution.

Answer 1

Stupid me, fault was in:

<!--Shipment reference-->
  <ng-container matColumnDef="shipmentReference">
    <th mat-header-cell *matHeaderCellDef> Reference </th>
    <td  mat-cell *matCelDeff="let shipment">{{shipment.shipmentReference}}</td>
  </ng-container>

  <!--Invoice reference-->
  <ng-container matColumnDef="invoiceReference">
    <th mat-header-cell *matHeaderCellDef>Invoice reference</th>
    <td mat-cell *matCelDeff="let shipment">{{shipment.invoiceReference}}</td>
  </ng-container>

the <th> tag should contain *matCellDef instead *matCelDeff