angular2，接口TypeScript，ERROR ReferenceError：未定义基数

Question

我刚刚开始学习Angular2，我做了一些教程。 我必须基于接口显示服务中的数据。 而且我有问题。

我认为问题来自TypeScript界面​​，但是，因为这对我来说是新事物，所以我什至不知道在哪里寻找错误。

currency.ts（接口）：

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"}
        }]
    };

}

货币成分

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应该显示对象，但出现错误

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）

而且我真的不知道我哪里出了错。 我在app.modules中添加了提供程序CurrencyService。 请帮忙，我想学习Angular2，所以我想了解我的错误。

Answer 1

您有2个错误，我可以看到。

1. 您正在使用this.currency但currency未定义为CurrencyComponent类型的成员，因此该组件甚至不应进行转换。
2. 您的服务方法实际上并未返回列表，而是将其分配给了一个字段。 如果您打算在组件中捕获结果，请在方法getCurrency （）的末尾添加return语句（或在创建列表后在组件中添加第二个赋值调用）。

带有修复程序的关注代码。 我省略了与该问题无关的代码。

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;
    }
}

货币成分

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();
    }
}