angular2, 接口 TypeScript, 错误 ReferenceError: base is not defined

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 ERROR ReferenceError: base is not defined 在 CurrencyService.getCurrency (currency.service.ts:19) 在 CurrencyComponent.getCurrency (currency.component.ts:22) 在 CurrencyComponent.ngOnInit (currency.component.ts:27) 在 checkAndUpdateDirectiveInline (core.js:12095) 在 checkAndUpdateNodeInline (core.js:13598) 在 checkAndUpdateNode (core.js:13541) 在 debugCheckAndUpdateNode (core.js:14413) 在 debugCheckDirectivesFn (core.js:14354) 在 Object.eval [as updateDirectives] (AppComponent.html:3) 在 Object.debugUpdateDirectives [as 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;
    }
}

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