Angular 属性 'expenseEntry' 在类型 'ExpenseEntryComponent' 上不存在

Question

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

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

a)

b)

但是没看清楚

我的费用-entry.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),
        };

    }
}

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

}

我的费用-entry.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>

当我插入 {{expenseentry.item}} 时显示错误。我尝试重新启动服务器但没有成功

Answer 1

expense-entry.ts只会导出接口。您创建了两个具有相同名称的组件。

费用-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 class 在两个文件中使用，而 expense-entry.component.ts 文件没有任何名为 [=12 的成员=] 在 class 文件中，但 expense-entry.ts 有。

试试 removing/altering 你的代码就可以了。

Angular 属性 'expenseEntry' 在类型 'ExpenseEntryComponent' 上不存在

Angular Property 'expenseEntry' does not exist on type 'ExpenseEntryComponent'

javascript

data-binding

frameworks

typescript

angular