类型“ExpenseEntryComponent”上不存在角属性“费用条目”

Question

null

import { Component } from "@angular/core";
import { OnInit } from "@angular/core";

export interface ExpenseEntry { 
    id: number; 
    item: string; 
    amount: number; 
    category: string; 
    location: string;
    spendOn: Date; 
    createdOn: Date;
}
@Component({
    template: ''
  })
export class ExpenseEntryComponent implements OnInit{
    title: string;
    expenseEntry: ExpenseEntry;
    constructor(){ }

    ngOnInit(){
        this.title = "Expense Entry";
        this.expenseEntry = {
            id: 1, 
            item: "Pizza",
            amount: 21, 
            category: "Food", 
            location: "Zomato", 
            spendOn: new Date(2020, 6, 1, 10, 10, 10), 
            createdOn: new Date(2020, 6, 1, 10, 10, 10),
        };

    }
}

import { Component, OnInit } from '@angular/core';
import {ExpenseEntry} from '../../app/expense-entry/expense-entry'

@Component({
  selector: 'app-expense-entry',
  templateUrl: './expense-entry.component.html',
  styleUrls: ['./expense-entry.component.css']
})
export class ExpenseEntryComponent implements OnInit {
  title: string | undefined;
  constructor() { }

  ngOnInit(): void {
    this.title = "Expense Entry";
  }
  

}

<!------------------content------->
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center" style="padding-top: 20px;">
            <div class="container" style="padding-left: 0px; padding-right:0px;">
                <div class="row">
                    <div class="col-sm" style="text-align: left;">{{title}}  </div>
                    <div class="col-sm" style="text-align: right;"> <button type="button" class="btn btn-primary">Edit</button>
                    </div>
                </div>
            </div>
            <div class="container box" style="margin-top: 10px;">
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Item :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.item}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Amount :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.amount}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Category :</em></strong></div>
                    <div class="col" style="text-align: left;"> food</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Location :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.location}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Spend on :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.spendOn}} </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

ts将只导出接口。您已经创建了两个同名的组件。

费用-入口.ts：

export interface ExpenseEntry { 
   id: number; 
   item: string; 
   amount: number; 
   category: string; 
   location: string; 
   spendOn: Date; 
   createdOn: Date; 
}

然后，在expenseEntryComponent.ts中，您需要导入上述接口，如下所示：

import { ExpenseEntry } from '../expense-entry';

@Component({
  selector: 'app-expense-entry',
  templateUrl: './expense-entry.component.html',
  styleUrls: ['./expense-entry.component.css']
})

export class ExpenseEntryComponent implements OnInit { 

   title: string; 
   expenseEntry: ExpenseEntry; 
   constructor() { } 

   ngOnInit() { 
      this.title = "Expense Entry"; 
      this.expenseEntry = { 
         id: 1, 
         item: "Pizza", 
         amount: 21, 
         category: "Food", 
         location: "Zomato", 
         spendOn: new Date(2020, 6, 1, 10, 10, 10), createdOn: new Date(2020, 6, 1, 10, 10, 10), 
      }; 
   } 
}