TS2349：此表达式不可调用。 类型 'void' 没有调用签名

Question

我是 angular 和 TS 的新手。 尝试创建一个组件以使用setInterval方法。 这是我的 TS 组件

import { Component, OnInit, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-gamecontrol',
  templateUrl: './gamecontrol.component.html',
  styleUrls: ['./gamecontrol.component.css']
})
export class GamecontrolComponent implements OnInit {

  constructor() { }
  counterEmitter = new EventEmitter<number>();
  counter = 0;

  initiateGame = setInterval(() => {
    this.counter++;
    this.counterEmitter.emit(this.counter);
    console.log(this.counter);
  }, 1000);

  stopGame = clearInterval(this.initiateGame);

  ngOnInit(): void {
  }
}

这是 HTML 组件调用它：

<h3>Welcome to the game of Chances</h3>
<div class="container">
    <div class="row">
        <button class="btn btn-primary" (click)="initiateGame()">Start Game</button>
    </div>
    <div class="row">
        <button class="btn btn-primary" (click)="stopGame()">Stop Game</button>
    </div>
</div>

当我尝试运行应用程序时，出现以下错误：

RROR in src/app/gamecontrol/gamecontrol.component.html:4:50 - error TS2349: This expression is not callable.
      Type 'Number' has no call signatures.
    
    4         <button class="btn btn-primary" (click)="initiateGame()">Start Game</button>
                                                       ~~~~~~~~~~~~
    
      src/app/gamecontrol/gamecontrol.component.ts:5:16
        5   templateUrl: './gamecontrol.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component GamecontrolComponent.
    src/app/gamecontrol/gamecontrol.component.html:7:50 - error TS2349: This expression is not callable.
      Type 'void' has no call signatures.
    
    7         <button class="btn btn-primary" (click)="stopGame()">Stop Game</button>
                                                       ~~~~~~~~
    
      src/app/gamecontrol/gamecontrol.component.ts:5:16
        5   templateUrl: './gamecontrol.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component GamecontrolComponent.

此外，当我如下所示声明我的 function 时，它不会给出任何错误并且工作正常。 两种方法有什么区别？

initiateGame() {
  setInterval(() => {
    this.counter++;
    this.counterEmitter.emit(this.counter);
    console.log(this.counter);
  }, 1000);
}

我在这里到底做错了什么？ 此外，我不仅需要工作代码。 我需要了解为什么这是一个问题。 我试图用类似的查询阅读其他几个问题，但我并没有清楚地理解那里的问题。

Answer 1

正如@harmandeepsinghkalsi 在评论中指出的那样，问题出在调用 setInterval 的方式上，而不是 Angular/TS 特定的问题。 我能够通过对我的代码稍作调整来解决这个问题。 回答这个问题只是为了结束这个问题，并让未来的堆垛机更新答案。

这是新修改的代码：

@Output() counterEmitter = new EventEmitter<number>();
  counter = 0;
  intervalId: any;

  initiateGame() {
    this.intervalId = setInterval(() => {
      this.counter++;
      this.counterEmitter.emit(this.counter);
      console.log(this.counter);
    }, 1000);
  }

  stopGame() {
    clearInterval(this.intervalId);
  }
  ngOnInit(): void {
  }