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

Question

1. 我正在尝试从本教程 https://www.tutorialspoint.com/angular8/angular8_pdf_version.htm 第 33 页构建费用输入应用程序。

我收到此错误 - “ExpenseEntryComponent”类型上不存在属性“expenseEntry”。 我试过这个链接

a)Angular error TS2339 Property does not exist on type

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

但是我没看清楚

1. 我的费用条目.ts 文件

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

    }
}

1. expense-entry.component.ts 文件在这里

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. 我的费用条目.component.html 文件

<!------------------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. 当我插入 {{expenseentry.item}} 时，它显示错误。 我尝试重新启动服务器，但没有成功

Answer 1

expense-entry.ts 只会导出接口。您已经创建了两个同名的组件。

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

Answer 2

通过快速浏览您的代码，我可以看到 ExpenseEntryComponent 类在两个文件中使用，expense-entry.component.ts 文件在类文件中没有任何名为 expenseEntry 的成员，但 expense-entry.ts 有.

尝试删除/更改它，您的代码将起作用。