I just start to learn Angular2, I make some tutorial. 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.
currency.ts(interface):
export interface ICurrency {
base: string;
date: string;
rates: object;
}
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
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)
And I really don't have idea where I got a mistake. I add provider CurrencyService in app.modules. Please, help, I want to learn Angular2 so I want to understand my mistake.
You have 2 errors that I can see.
this.currency
but currency
is not defined as a member in your CurrencyComponent
type, this component should not even transpile. 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). Code of interest with fixes. I omitted code that was not relevant to the problem.
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();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.