angular2, interface TypeScript, ERROR ReferenceError: base is not defined

Question

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.

Igor Igor · Accepted Answer · 2017-11-27T21:34:10

You have 2 errors that I can see.

You are using this.currency but currency is not defined as a member in your CurrencyComponent type, this component should not even transpile.
Your service method does not actually return the list, it assigns it to a field. Add a return statement to the end of your method 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();
    }
}

angular2, interface TypeScript, ERROR ReferenceError: base is not defined

1 Answers