我想做的事情:
生成一个随机数
计时器计数到该数字，然后显示一个具有随机边距的按钮
第一个计时器停止，第二个计时器启动
当用户单击按钮时，第二个计时器会打印按钮出现和单击之间耗时
我想创建一个 bool 值的组件类字段，当单击按钮时， bool 值更改为 true，然后计时器在每个刻度处检查 bool 值，如果为 true，则删除按钮并启动第一个按钮再次计时器。
问题是，当我单击按钮时，单击的字段没有改变。这里有什么问题？
import { Component, OnInit } from '@angular/core';
import {TimerObservable} from "rxjs/observable/TimerObservable";
@Component({
selector: 'app-gra',
templateUrl: './gra.component.html',
styleUrls: ['./gra.component.css']
})
export class GraComponent implements OnInit {
randNum: any;
timerSub: any;
userTimerSub: any;
clicked: boolean;
constructor() { }
ngOnInit() {
this.randNum = 3+ Math.floor(Math.random()*3);
console.log('random: ' + this.randNum)
this.clicked = false;
let timer = TimerObservable.create(0, 1000);
this.timerSub = timer.subscribe( d => this.timerFunction(d) );
}
timerFunction(d){
console.log(d);
if(d === this.randNum){
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode("CLICK ME"); // Create a text node
btn.appendChild(t);
btn.id = "button"
let margin = Math.floor(Math.random()*500);
document.body.appendChild(btn); // Append <button> to <body>
btn.setAttribute('style', 'margin-top: ' + margin + "px;");
document.getElementById("button").addEventListener("click", this.buttonClick);
this.timerSub.unsubscribe();
let timer = TimerObservable.create(0, 1000);
this.userTimerSub = timer.subscribe( d => this.userTimerFunction(d) );
this.randNum = 3 + Math.floor(Math.random()*3);
console.log('new rand: ' + this.randNum)
}
}
userTimerFunction(d){
console.log('user' + d)
console.log(this.clicked)
if(this.clicked == true){
console.log('It took you ' + d + 'seconds');
this.userTimerSub.unsubscribe();
var element = document. getElementById("button");
element.parentNode.removeChild(element);
let timer = TimerObservable.create(0, 1000);
this.timerSub = timer.subscribe( d => this.timerFunction(d) );
}
}
buttonClick(){
console.log('clicked: ' + this.clicked);
this.clicked = true;
}
}
最佳答案
我相信按照您的方式绑定(bind) click 方法不会按照您期望的方式绑定(bind)“this”关键字，并且“clicked”属性不会更改。您可以尝试使用fat arrow syntax to bind the 'this' keyword 。
addEventListener("click", () => this.buttonClick())
但是我建议您使用内置渲染器的 Angulars service for handling dom manipulations如果你想在 Angular 中工作。
this.renderer.listen(elementRef.nativeElement, 'click', (evt) => {
console.log('Clicking the document', evt);
})
关于javascript - 按钮的事件监听器不会更改 Angular 中的类字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50698983/