Question

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

我有一个简单的类（Status）需要从服务器获取一些间隔的数据。

更新我已经将FabData Luz中的CalcData添加到喷射器，但我仍然得到相同的错误。好的电话顺便说一句;）。

该课程如下：

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

请注意，您的构造函数正在使用名称完全与要注入的类的名称匹配的参数。这会导致运行时混淆，因为您可能最终将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命名约定。

Answer 2

好像我必须绑定＆＃34;这个＆＃34;传递对象引用。在hello中调用它时，read如何获取正确的对象。

E.g。

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

调用模块功能时，注入模块未定义

2 个答案: