Whenever I use the code below, I encounter
error TS2339: Property 'timestamp' does not exist on type 'LogRepair[]'
In the component's HTML file, I am attempting to loop through an array of properties defined in the LogRepair type:
<div>
<div *ngFor = "let repair of repairs" class="repair_list">
<div class = "RT">{{repairs.name}}</div>
<div class = "Repair Type">{{repairs.type}}</div>
<div class = "Gecko Number">{{repairs.phoneID}}</div>
<div class = "Warranty Sticker">{{repairs.stickerID}}</div>
<div class = "Description">{{repairs.description}}</div>
<div class = "Timestamp">{{repairs.timestamp}}</div>
</div>
In the component's TypeScript file, I import the LogRepair model and declare a property called repairs:
import { Component, OnInit } from '@angular/core';
import { LogRepairService } from '../log-repair.service';
import { LogRepair } from '../LogRepair.model';
@Component({
selector: 'app-view-repairs',
templateUrl: './view-repairs.component.html',
styleUrls: ['./view-repairs.component.scss']
})
export class ViewRepairsComponent implements OnInit {
repairs: LogRepair[]=[];
constructor(private logRepairService: LogRepairService){}
// Called first time before the ngOnInit()
ngOnInit(): void {
// Called after the constructor and called after the first ngOnChanges()
this.repairs = this.logRepairService.getRepairs();
}
}
In the service file, I export a class LogRepairService which contains hard-coded data in the LogRepair format.
import { Injectable } from '@angular/core';
import { LogRepair } from './LogRepair.model';
@Injectable({
providedIn: 'root'
})
export class LogRepairService {
repairs: LogRepair [] =[
{name:"Tom",type:"standard",phoneID:"12345",stickerID:"ZX57B",description:"",timestamp: new Date ('2020-02-25T23:18:21.932Z') },
{name:"Ben",type:"Warranty",phoneID:"54321",stickerID:"B76Gf",description:"touch ic",timestamp: new Date ('2021-02-25T23:18:21.932Z') },
];
constructor() { }
getRepairs(){
return this.repairs;
}
postRepair(repairs:LogRepair){
}
}
Below is the model file with the timestamp property included:
export interface LogRepair
{
name: string;
type: string;
phoneID: string;
stickerID: string;
description: string;
timestamp: Date;
}
Since the timestamp property is present in the exported interface, I am facing challenges resolving this error.