[英]angular2, interface TypeScript, ERROR ReferenceError: base is not defined
I just start to learn Angular2, I make some tutorial. 我刚刚开始学习Angular2,我做了一些教程。 I have to display data from service based on interface. 我必须基于接口显示服务中的数据。 And I have problem. 而且我有问题。
I think problem come from TypeScript interface, but, because it's something new for me, I even don't know where looking for mistake. 我认为问题来自TypeScript界面,但是,因为这对我来说是新事物,所以我什至不知道在哪里寻找错误。
currency.ts(interface): currency.ts(接口):
export interface ICurrency {
base: string;
date: string;
rates: object;
}
currency.service: currency.service:
import { Injectable } from '@angular/core';
import { ICurrency } from './currency';
@Injectable()
export class CurrencyService {
currency:Array<ICurrency>;
getCurrency(){
this.currency = [{
base: "base1111",
date: "11111",
rates: {a:"a",b:"b"}
},
base: "base2222",
date: "222222",
rates: {a:"c",b:"d"}
}]
};
}
currency.component 货币成分
import { Component, OnInit } from '@angular/core';
import { CurrencyService } from './currency.service';
import { ICurrency } from './currency';
@Component({
selector: 'app-currency',
template: `
<p>
currency works!
</p>
`,
styles: []
})
export class CurrencyComponent implements OnInit {
constructor(private _currencyList: CurrencyService) { }
getCurrency(){
this.currency = this._currencyList.getCurrency();
console.log(this.currency);
}
ngOnInit(){
this.getCurrency();
}
}
Consola should display the object, but I got error Consola应该显示对象,但出现错误
AppComponent.html:1 ERROR ReferenceError: base is not defined at CurrencyService.getCurrency (currency.service.ts:19) at CurrencyComponent.getCurrency (currency.component.ts:22) at CurrencyComponent.ngOnInit (currency.component.ts:27) at checkAndUpdateDirectiveInline (core.js:12095) at checkAndUpdateNodeInline (core.js:13598) at checkAndUpdateNode (core.js:13541) at debugCheckAndUpdateNode (core.js:14413) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (AppComponent.html:3) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) AppComponent.html:1错误ReferenceError:未在CurrencyComponent.ngOnInit(currency.component.ts:27)的CurrencyComponent.getCurrency(currency.component.ts:22)处的CurrencyService.getCurrency(currency.service.ts:19)处定义基数)at checkAndUpdateDirectiveInline(core.js:12095)at checkAndUpdateNodeInline(core.js:13598)at checkAndUpdateNode(core.js:13541)at debugCheckAndUpdateNode(core.js:14413)at debugCheckDirectivesFn(core.js:14354)at Object.eval [作为updateDirectives](AppComponent.html:3),位于Object.debugUpdateDirectives [作为updateDirectives](core.js:14339)
And I really don't have idea where I got a mistake. 而且我真的不知道我哪里出了错。 I add provider CurrencyService in app.modules. 我在app.modules中添加了提供程序CurrencyService。 Please, help, I want to learn Angular2 so I want to understand my mistake. 请帮忙,我想学习Angular2,所以我想了解我的错误。
You have 2 errors that I can see. 您有2个错误,我可以看到。
this.currency
but currency
is not defined as a member in your CurrencyComponent
type, this component should not even transpile. 您正在使用this.currency
但currency
未定义为CurrencyComponent
类型的成员,因此该组件甚至不应进行转换。 getCurrency
() if you intend to capture the result in your component (or add a second assignment call in your component after the list has been created). 如果您打算在组件中捕获结果,请在方法getCurrency
()的末尾添加return语句(或在创建列表后在组件中添加第二个赋值调用)。 Code of interest with fixes. 带有修复程序的关注代码。 I omitted code that was not relevant to the problem. 我省略了与该问题无关的代码。
currency.service: currency.service:
@Injectable()
export class CurrencyService {
currency:Array<ICurrency>;
getCurrency() : Array<ICurrency> {
this.currency = [{
base: "base1111",
date: "11111",
rates: {a:"a",b:"b"}
}, {
base: "base2222",
date: "222222",
rates: {a:"c",b:"d"}
}];
return this.currency;
}
}
currency.component 货币成分
export class CurrencyComponent implements OnInit {
currency:Array<ICurrency>;
constructor(private _currencyList: CurrencyService) { }
getCurrency(){
this.currency = this._currencyList.getCurrency();
console.log(this.currency);
}
ngOnInit(){
this.getCurrency();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.