子组件无法访问 object 的属性

Question

I have a Quote model:

export default class Quote {
    _id: string;
    quotee: string;
    body: string;
    dateQuoted: Date;
    dateCreated: Date;  
}

My parent component is:

export class HomeComponent implements OnInit {

  quotes: Quote[] = []

  constructor(private quoteService: QuoteService) { }

  ngOnInit(): void {
    this.quoteService.getQuotes().subscribe((quote: Quote[]) => this.quotes = quote);
  }

}

I am sending the object in home.component.html

<div class="col-sm" *ngFor="let quote of quotes">
              <app-quote-box [quote]="quote"></app-quote-box>>
            </div>

My child component has an @Input() decoration:

export class QuoteBoxComponent implements OnInit {

  @Input() 
  quote: Quote;

  constructor() { }

  ngOnInit(): void {
  }

}

And I am trying to access the properties of the quote in the quote-box.component.html:

<div class="quote-box">
  <h2>{{quote.quotee}} </h2>
  <p>"{{quote.body}}"</p>
</div>

I am getting the error:

Property 'quotee' does not exist on type 'Quote'.

Can someone explain to me what I am doing wrong? Thank you for any help

Answer 1

Try to change to:

import { Component, OnInit, Input } from '@angular/core'; 
import { Quote } from '@angular/compiler';