ข้อผิดพลาด Typescript TS2339: คุณสมบัติไม่ปรากฏในประเภท (Angular 12)

ด้วยโค้ดต่อไปนี้ฉันได้รับ

ข้อผิดพลาด TS2339: ไม่มีสมบัติ 'timestamp' บนชนิด 'LogRepair[]'

ใน HTML ของคอมโพเนนต์ ผมกำลังพยายามวนซ้ำผ่านอาเรย์ของคุณสมบัติใด ๆ ที่ถูกกำหนดในประเภท 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>

ในคอมโพเนนต์ ts ฉันกำลังนำเข้าโมเดล LogRepair และประกาศพร็อพเพอร์ตี้ที่ชื่อ 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();

  }
}

ในไฟล์ service ts ฉันกำลังส่งออกคลาส LogRepairService ซึ่งเป็นอาร์เรย์ของข้อมูลที่กำหนดค่าค้างไว้ของประเภท LogRepair

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

  }
}

นี่คือตัวอย่าง ts ที่มีคุณสมบัติ timestamp อยู่

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

เนื่องจากคุณสมบัติ timestamp มีอยู่ในอินเทอร์เฟซที่ส่งออก ฉันจึงกำลังดิ้นรนที่จะจัดการกับข้อผิดพลาดนี้

คำตอบ #1

คุณกำลังพยายามเข้าถึงแอตทริบิวต์บนอาร์เรย์ของ LogRepair นั่นคือเหตุผลที่ข้อความแสดงข้อผิดพลาดมีวงเล็บสี่เหลี่ยมหลังชื่อประเภท

ฉันไม่ค่อยคุ้นเคยกับ Angular แต่ฉันเดาว่าสิ่งที่คุณกำลังพูดคือ repairs.timestamp ในขณะที่คุณต้องการเขียน repair.timestamp นั่นคือ อ้างถึงองค์ประกอบปัจจุบันในลูปแทนที่จะอ้างถึงทั้งอาร์เรย์