Angular 类型“ExpenseEntryComponent”上不存在属性“expenseEntry”

Question

1. I am trying to build expense entry app from this tutorial https://www.tutorialspoint.com/angular8/angular8_pdf_version.htm page 33.

I am getting this error - Property 'expenseEntry' does not exist on type 'ExpenseEntryComponent'. i have tried this links

a) Angular error TS2339 Property does not exist on type

b) Angular - How to fix 'property does not exist on type' error?

but i didnt get it clearly

2. my expense-entry.ts file

 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), }; } }

3. expense-entry.component.ts file is here

 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"; } }

4. my expense-entry.component.html file

 <:------------------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>

5. when i insert {{expenseentry.item}} it shows error. i tried restarting the server but didnt work

Answer 1

expense-entry.ts will only export interface. You have created two components with same name.

expense-entry.ts:

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

Then in your ExpenseEntryComponent.ts you need to import above interface as below:

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), 
      }; 
   } 
}

Answer 2

With a quick scrub through your code, I can see the ExpenseEntryComponent class is used in two files and the expense-entry.component.ts file doesn't have any member called expenseEntry in the class file, but expense-entry.ts does.

Try removing/altering that and your code will work.