With the following code I get

error TS2339: Property 'timestamp' does not exist on type 'LogRepair[]'

In the component html, I am trying to iterate through any array of properties defined in type LogRepair:

<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 ts, I am importing the LogRepair model and declaring 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 ts I am exporting a class LogRepairService which is an array of hard-coded data of the LogRepair type.

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

  }
}

Here is the model ts with the timestamp property present.

export interface LogRepair
{
   name: string;
   type: string;
   phoneID: string;
   stickerID: string;
   description: string;
   timestamp: Date;
}

As the property timestamp is present in the interface export, I am struggling to resolve this error.

CodePudding user response：

You are trying to access the attribute on the array of LogRepair that is why the error message includes the square brackets after the type name.

I'm not too familiar with angular but my guess is that you are saying repairs.timestamp when you mean to write repair.timestamp i.e. the current element in the loop instead of referencing the entire array.