调用模块函数时注入的模块未定义

Question

我正在尝试制作一个使用 Aurelia 和 Javascript 以及 ES6 的网站。

我有一个简单的 class（状态）需要从服务器获取一些数据。

更新我已按照 Fabio Luz 的建议将 CalcData 添加到喷油器中，但我仍然遇到相同的错误。顺便说一句 ;).

class 看起来像这样：

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 class 看起来像这样：

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

请注意，您的构造函数所采用的参数的名称完全与您要注入的classes 的名称相匹配。这会导致运行时混乱，因为您可能最终将 this.Calcdata 设置为 class CalcData（StatusData 也是如此）。 class 没有名为 hello() 的函数，只有 class 的 个实例 具有该函数。如果您将参数名称更改为不完全匹配，您的问题应该会消失。

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

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

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

Answer 2

似乎我必须绑定 "this" 才能传递对象引用。在 hello 中调用它时，它是如何读取正确的对象的。

例如

import {inject} from "aurelia-framework"; 
import {StatusService} from "./statusService"

@inject(StatusService)
export class Status{
      message = 'unknown yet';
      statusService: StatusService;

      constructor(statusService){
            this.statusService = statusService;
      }

      activate(){
          setInterval(this.updateStatus.bind(this), 3000);
      }

       updateStatus = function () {
         this.message =  this.statusService.getX();
      }
}

调用模块函数时注入的模块未定义

Injected module is undefined when calling module function

javascript

ecmascript-6

aurelia

es6-class