angular - 在 Angular 4 Typescript App 的回调中运行时调试期间未定义 'this.variable'

Question

我的 friend 们，

我已经开始开发 Angular4 应用程序并遇到了以下(webpack？)奇怪的行为。当在可观察的 getHistory(一个 API 调用)的回调中在 chrome 中进行运行时调试时，当我将鼠标悬停在它上面时，this.varTimeSeries 显示为未定义。

Console.log(this.varTimeSeries) 在控制台中记录正确的对象。

您可以看到我正确地使用了粗箭头语法 =>，它应该在回调中返回组件的 this。

知道为什么会这样吗？

public getHistory() {

    this.varHistoryService.getHistory(this.selectedConfig.NAME)
        .subscribe(res => {
            this.varTimeSeries = res;
            console.log(this.varTimeSeries);
        },
        errors => {
            console.log(errors);
        });
}

这是我的 tsconfig.webpack.json 文件的样子:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noEmit": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "es2015",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "node"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "Client/**/*.spec.ts",
    "Client/**/*.e2e.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "angularCompilerOptions": {
    "genDir": "./compiled",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 1

问题出在 tsconfig.json 文件中，该文件错误地引用了 es5!

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "devtool": "source-map",
    "sourceMap": true,
    "noEmit": true,
    "importHelpers": true,
    "noEmitHelpers": true,
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "noImplicitReturns": true,
    "lib": [
      "dom",
      "es6"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "hammerjs",
      "jasmine",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "compiled"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}