Angular，函数在传递给模型中的类时未定义，但如果直接调用则可以工作

Question

我正在尝试创建一个类，该类具有一个函数，该函数每 5 秒启动一个自调用循环，该循环将使用 http.request 库检查某个服务器设置，并且当该设置与调用参数中定义的设置匹配时，它会发出一个信号并停止调用自己。（我实际上还没有开始编写工作本身，只是尝试进行设置工作）。

\n

问题是我有一种调用服务器的方法，如果直接从组件调用，该方法可以工作，但是当模型中的函数尝试使用它时，它会给出以下错误：

\n

ERROR TypeError: Cannot read properties of undefined (reading 'request')\n

\n

这是我正在使用的基本逻辑：

\n

组件：

\n

import { Component, OnInit, EventEmitter } from '@angular/core';\nimport { ServerService } from '../../server.service';\nimport { SafePipe } from '../../_helpers/safe.pipe';\nimport { SharedVariables } from '../../_services/shared-variables.service';\nimport { ServerSettingValueObserver } from '../../_models/valueObservers.model';\n\n@Component({\n  selector: 'app-analytics',\n  templateUrl: './analytics.component.html',\n  styleUrls: ['./analytics.component.css']\n})\nexport class AnalyticsComponent implements OnInit {\n  analyticsUrl;\n  iframeStatus = new EventEmitter();\n\n  constructor(private server: ServerService, private sharedVariables: SharedVariables, private safe: SafePipe) { }\n\n  ngOnInit(): void {\n    this.sharedVariables.getAnalyticsUrl().subscribe((value) => {\n      this.analyticsUrl = value;\n    });\n    var value_observer = new ServerSettingValueObserver("iframeEnabled", true, this.iframeStatus);\n    value_observer.startJob(this.server.getServerSettings);\n  }\n\n  changeMatomoStatus() {\n    this.server.changeMatomoStatus().then((res) => {\n      console.log("changed");\n    });\n  }\n}\n

\n

这是传递给类中函数的相关服务：

\n

  getServerSettings() {\n    return this.request('GET', '/api/settings/server');\n  }\n

\n

这是模型：

\n

export class ServerSettingValueObserver{\n  constructor(\n    public value: string,\n    public state: boolean,\n    public signal: any,\n  ){ }\n\n  public startJob(job: any): void{\n    console.log('job',job)\n    job().then((response: any) => {\n      console.log(response);\n    });\n  }\n}\n

\n

这是console.log的输出：

\n

job \xc6\x92 getServerSettings(){return this.request("GET","/api/settings/server")}\n

\n

我认为这应该意味着传递给函数的对象应该是一个函数，但为什么在这种情况下会出现错误？

\n

为了测试一下，我尝试直接调用服务中的函数，它工作没有问题。

\n

对于这个测试，我替换为：

\n

var value_observer = new ServerSettingValueObserver("iframeEnabled", true, this.iframeStatus);\nvalue_observer.startJob(this.server.getServerSettings);\n

\n

和：

\n

this.server.getServerSettings().then((response: any) => {\n  console.log(response);\n});\n

\n

Answer 1

更改这一行：

    value_observer.startJob(this.server.getServerSettings)

对此：

    value_observer.startJob(() => this.server.getServerSettings())

或这个：

     value_observer.startJob(this.server.getServerSettings.bind(this.server))

您收到错误，因为当您以这种方式将函数作为参数传递时，它会丢失上下文this，因此this确实是未定义的。要保持 的正确值this，您必须传递箭头函数（第一个示例）或手动绑定 的值this（第二个示例）。