javascript - “ExpenseEntryComponent”类型上不存在角度属性“expenseEntry”
问题描述
- 我正在尝试从本教程https://www.tutorialspoint.com/angular8/angular8_pdf_version.htm第 33 页构建费用输入应用程序。
我收到此错误 - 类型“ExpenseEntryComponent”上不存在属性“expenseEntry”。我试过这个链接
b) Angular - 如何修复“类型上不存在属性”错误?
但我没明白
- 我的费用条目.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),
};
}
}
- 费用入口.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}} 时,它显示错误。我尝试重新启动服务器但没有工作
解决方案
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),
};
}
}
推荐阅读
- javascript - P5 绕圈移动物体未能破坏旧物体
- python - 用返回值替换参数值
- python - 获取设备名称python
- r - geosphere/R:计算用 4 个点定义的两个大圆之间的交点
- python - Get row values as list when column value equal something
- r - 打印出巨大的情节,这样我就可以看到结果
- python - 有没有办法将标签和输入框都集中在 tkinter 的特定行上?
- spring - Spring Boot java.lang.IllegalArgumentException:不是托管类型
- pip - pipenv 模拟 pip -f 选项的选项
- rust - 如何在wasm32中获取rust struct关联函数、struct方法或trait方法导出函数