Currently, I'm attempting to showcase some test data on a table within this pug file.
.container
p-table([value]="batches")
ng-template(pTemplate="header")
tr
th Batch ID
th Batch Start
th Batch End
th Mismatched Customers
th Customers Evaluated
ng-template(pTemplate="body" let-batch='')
tr
td {{batch.batchId}}
td {{batch.batchStart}}
td {{batch.batchEnd}}
td {{batch.quantityMismatched}}
td {{batch.quantityEvaluated}}
However, I am encountering errors stating that the 'batch' property does not exist on type 'BatchDashboardComponent'
Here is my typescript file:
import { Component, OnInit } from '@angular/core';
import { BatchData } from '../../util/data';
import { BATCHES } from '../../util/mock-data';
import { BatchService } from '../../services/batch/batch.service';
@Component({
selector: 'batch-dashboard',
templateUrl: './batch-dashboard.component.pug',
styleUrls: ['./batch-dashboard.component.scss'],
providers: [BatchService]
})
export class BatchDashboardComponent implements OnInit {
batches: BatchData[];
constructor(){
}
ngOnInit(){
this.batches = BATCHES;
console.log(this.batches);
}
}
The mock data structure of type BatchData defined as:
export interface BatchData {
batchId: number,
batchStart: string,
batchEnd: string,
quantityMismatched: number,
quantityEvaluated: number
}
If you have any insights into why I'm facing this issue, please share them. Thanks in advance!
EDIT: I've also experimented with these approaches but they didn't work:
.centered-col-8
.container
p-table([value]="batches")
ng-template(pTemplate="header")
tr
th Batch ID
th Batch Start
th Batch End
th Mismatched Customers
th Customers Evaluated
ng-template(pTemplate="body" let-batch)
tr
td {{batch.batchId}}
td {{batch.batchStart}}
td {{batch.batchEnd}}
td {{batch.quantityMismatched}}
td {{batch.quantityEvaluated}}
.centered-col-8
.container
p-table([value]="batches")
ng-template(pTemplate="header")
tr
th Batch ID
th Batch Start
th Batch End
th Mismatched Customers
th Customers Evaluated
ng-template(pTemplate="body" let-batch [ngForOf]="batches")
tr
td {{batch.batchId}}
td {{batch.batchStart}}
td {{batch.batchEnd}}
td {{batch.quantityMismatched}}
td {{batch.quantityEvaluated}}