我想在定时器值变为0时调用一个函数。当我单击卡时,一个弹出窗口打开,然后定时器启动。下面是代码:
import {Component} from '@angular/core';
interface Person {
name: string
}
@Component({
selector: 'sample-app',
template: `
<div *ngFor="let person of listOfPeople">
<span *ngIf="personOnEdit !== person" (click)="edit(person)">{{ person.name }}</span>
<input *ngIf="personOnEdit === person"
[(ngModel)]="person.name"
autofocus
(focusout)="edit(null)" />
</div>
<br/>
<div>
<form (submit)="addPerson()">
<input placeholder="New Person Name" #newPersonName />
<button (click)="addPerson(newPersonName.value); newPersonName.value = ''">Add Person</button>
</form>
</div>
`
})
export class AppComponent {
personOnEdit: Person = null;
listOfPeople: Array<Person> = [
{
name: "Bob",
},
{
name: "Catie",
},
{
name: "Dan",
}
];
edit(person) {
this.personOnEdit = person;
}
addPerson(personName) {
this.listOfPeople.push({ name: personName })
}
}
已经尝试:using var self=this
如果我使用openModal() {
switch (area) {
case 'a':
var self_t = this;
uid = 11;
let timer = 20;
let interval = setInterval(function () {
let elementID = document.getElementById('float-div');
if(elementID == null) {
timer = this.inSeconds;
}
if(timer >= 0) {
if(elementID) {
elementID.innerHTML = String(timer);
}
}
if (--timer == 0) {
if(elementID) {
elementID.innerHTML = '0';
}
if(area == "a") {
self_t.callFunction(uid); // here it is not going, I put debugger here but i can see it doesn't go here!
clearInterval(interval);
}
}
}, 1000);
break;
case 'b':
console.log('something else');
break;
}
}
callFunction(uid) {
console.log(uid);
}
,则会引发错误。
答案 0 :(得分:2)
为此使用箭头功能。下面是一个片段,尝试一下即可解决问题。 Read more about Arrow functions
openModal() {
switch (area) {
case 'a':
uid = 11;
let timer = 20;
let interval = setInterval(() => {
let elementID = document.getElementById('float-div');
if (elementID == null) {
timer = this.inSeconds;
}
if (timer >= 0) {
if (elementID) {
elementID.innerHTML = String(timer);
}
}
if (--timer == 0) {
if (elementID) {
elementID.innerHTML = '0';
}
if (area == "abc") {
this.callFunction(uid); // here it is not going, I put debugger here but i can see it doesn't go here!
clearInterval(interval);
}
}
}, 1000);
break;
case 'b':
console.log('something else');
break;
}
}
callFunction(uid) {
console.log(uid);
}
更新:
使用箭头功能时无需以下语句。 this
将在函数内部可用。
var self_t = this;
希望这会有所帮助:)
答案 1 :(得分:1)
也许您应该修改这些代码
if(elementID == null) {
timer = this.inSeconds;
}
到
if(elementID == null) {
timer = self_t.inSeconds;
}