Angular material Error in HTML for mat-table

Question

我收到以下错误：

错误类型错误：无法在 MatRowDef.push../node_modules/@angular/cdk/esm5/table.es5.js.BaseRowDef.extractCellTemplate 处读取未定义的属性“模板”

我的.html 文件是：

<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>

我的 component.ts 文件如下所示：

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

当我打开错误中的所有帧时，我可以看到错误在行上

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

和

this.dataSource.data = this.completeShipments;

我的服务 class 如下所示：

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

并获取以下格式的数据：

[
    {
        "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
        }
    }
]

然后将其分配到以下界面：

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

我已经从其他组件中复制了这种工作方式，它可以正常工作。 我不知道为什么会遇到这个问题，而且找不到解决方案。

Answer 1

愚蠢的我，错在：

<!--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>

<th>标签应该包含*matCellDef而不是*matCelDeff