如何将事件分配给打字稿中的变量

Question

试图在变量中分配事件但不起作用。我不知道如何分配。我进入 console.log(this.myEvents) 就像 null 一样，无法访问最近的 tr。如果有人知道，请帮助找到解决方案。

app.component.ts：

public myEvents:any; 
logEvent(e)
{ 
    this.myEvents=e; // Store event info
}

// Set a timer for looping through the events
gameTimer = setInterval(function() {
    // Loop through events
    if(this.myEvents)
    {
        console.log(this.myEvents);// getting null

    }
}, 100)​

app.component.html：

<button (click)="logEvent(e)">Set event</button>

演示：https://stackblitz.com/edit/angular-yqelod?file=src/app/app.component.ts

Answer 1

在您的模板文件中，

使用

<button (click)="logEvent($event)">Set event</button>

代替

<button (click)="logEvent(e)">Set event</button>

也许对你有帮助。

Answer 2

您必须在 setInterval () => 中使用箭头函数，否则 this 指针未显示在您的组件上，您无法分配给 this.myEvents。

我没有测试就修复了你的组件：

class Game implements OnInit, OnDestroy {
    public myEvents: any; 

    private gameTimer: any = null;

    constructor() {

    }

     // Set a timer for looping through the events
    ngOnInit() {
        this.gameTimer = setInterval(() => {
            // Loop through events
            if (this.myEvents) {
                console.log(this.myEvents);// getting null

            }
        }, 100);​
    }

    ngOnDestroy() {
        if (this.gameTimer !== null) {
            clearInterval(this.gameTimer);
        }
    }

    logEvent(e: any)
    { 
        this.myEvents = e; // Store event info
    }

}

重要的是部分：

           this.gameTimer = setInterval(() => {
                // Loop through events
                if (this.myEvents) {
                    console.log(this.myEvents);// getting null

                }
            }, 100);​

更新： 工作 stackblitz 示例：https://stackblitz.com/edit/angular-xcjuqn