javascript - 调用模块函数时注入(inject)的模块未定义

Question

我正在尝试创建一个使用 Aurelia、Javascript 和 ES6 的网站。

我有一个简单的类(状态)，需要从服务器获取一定时间间隔的一些数据。

更新我已按照 Fabio Luz 的建议将 CalcData 添加到注入(inject)器中，但我仍然遇到相同的错误。顺便说一句，打得好；)。

该类如下所示:

import {inject} from "aurelia-framework"; // for the inject decorator
import { StatusData } from "./statusData"; // MovieData, the module that will be injected
import { CalcData } from "./Calc"

@inject(StatusData, CalcData) // Inject decorator injects MovieData
 export class Status {

    constructor(StatusData, CalcData) {
        this.statusData2 = StatusData;
        this.CalcData = CalcData;
    }
    activate() {
        setInterval(this.updateCalc, 3000);
    }

    updateCalc() {
        this.CalcData.hello()
            .then(statusData => this.statusData2 = statusData);
    }

    updateStatus() {
        return statusData2.getX()
            .then(statusData => this.statusData2 = statusData);
    }

    update() {
        return 1;
    }
}

调用了 updateCalc 函数，但发生这种情况时，浏览器会提示 CalcData 未定义。

Uncaught TypeError: Cannot read property 'hello' of undefined
    at updateCalc (status.js:17)
updateCalc @ status.js:17
status.js:17 Uncaught TypeError: Cannot read property 'hello' of undefined
    at updateCalc (status.js:17)
updateCalc @ status.js:17

CalcData 类如下所示:

import { inject } from "aurelia-framework"; // for the inject decorator
import { HttpClient } from "aurelia-http-client"; // for the http client that will be injected
    let baseUrl = "/movies.json";

    @inject(HttpClient)
    export class CalcData {

    constructor(httpClient) {
        this.http = httpClient;
    }

    hello() {
        return this.http.get(baseUrl)
            .then(response => {
                return response.content;
            });
    }
}

我似乎找不到问题所在，我环顾四周但找不到解决方案。我必须说我是 Aurelia 的新手。

非常感谢任何帮助!

Answer 1

您的问题很可能是由大写字母引起的。

让我们看看代码的开头:

import {inject} from "aurelia-framework"; // for the inject decorator
import { StatusData } from "./statusData"; // MovieData, the module that will be injected
import { CalcData } from "./Calc"

@inject(StatusData, CalcData) // Inject decorator injects MovieData
 export class Status {

    constructor(StatusData, CalcData) {
        this.statusData2 = StatusData;
        this.CalcData = CalcData;
    }

请注意，您的构造函数所采用的参数的名称​​完全与您要注入(inject)的类的名称匹配。这会导致运行时困惑，因为您可能最终将 this.Calcdata 设置为类 CalcData (对于 StatusData 也是如此) 。该类没有名为 hello() 的函数，只有该类的实例具有该函数。如果您将参数名称更改为不完全匹配，您的问题就会消失。

@inject(StatusData, CalcData) // Inject decorator injects MovieData
 export class Status {

    constructor(statusData, calcData) {
        this.statusData = statusData;
        this.calcData = calcData;
    }

我还小写了属性名称以匹配 JavaScript 命名约定。