[英]Angular Property 'expenseEntry' does not exist on type 'ExpenseEntryComponent'
我收到此错误 - 类型“ExpenseEntryComponent”上不存在属性“expenseEntry”。 我试过这个链接
b) Angular - 如何修复“类型上不存在属性”错误?
但我没明白
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>
fee-entry.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),
};
}
}
通过快速浏览您的代码,我可以看到ExpenseEntryComponent
class 在两个文件中使用,并且在 class 文件中, expense-entry.component.ts
文件没有任何名为expenseEntry
的成员,但expense-entry.ts
有。
尝试删除/更改它,您的代码将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.