html - 用于 mat-table 的 HTML 中的角度材料错误
问题描述
我收到以下错误:
错误类型错误:无法读取 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;
我的服务类如下所示:
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
}
}
我已经从其他正常工作的组件中复制了这种工作方式。我不知道为什么我会遇到这个问题,我找不到解决方案。
解决方案
愚蠢的我,错误在于:
<!--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
推荐阅读
- excel - 根据循环索引计算的范围生成图表
- shell - 来自 unix 中 aws 的连接响应
- c# - 未调用安装程序类 - 可视安装程序
- jquery - 如何使用 jquery click 函数显示从 json 数据中获取的表的特定行
- python - Tensorflow:如何计算激活函数的二次输入?
- reactjs - 为什么 !important 不能用内联样式在 react js 中工作
- reactjs - 如何在我的博客 react redux 项目中添加元标记以预览页面
- ios - 为什么在使用 CoreBluetooth 时会发生这种情况?
- python - 无法从 django rest 框架 url 获取图像
- python - 更改 gnu radio 中每个脉冲的中心频率