Question

我想使用Angular2创建一个简单的TypeScript应用程序。看起来很简单，但我无法实现我想要的目标。

我想在模板中显示属性值。我想使用setTimeout在1秒后更新相同内容。

Plunkr Code在这里：Code on Plunkr

我写的是：

import {Component} from 'angular2/core';

interface Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`<h1>Number Increment</h1><p>{{n}}</p>`
})
export class AppComponent {
  public n : number = 1;
  setTimeout(function() {
    n = n + 10;
  }, 1000);
}

当我使用此代码时，我收到以下错误：

Uncaught SyntaxError: Unexpected token ;

为什么我无法访问n，这与我们以前在JavaScript中使用的范围相同。如果我没有错，我们也可以在TypeScript中使用纯JavaScript。

我甚至尝试过

export class AppComponent {
  public n : number = 1;
  console.log(n);
}

但我无法在控制台中看到n的值。

当我尝试

时

export class AppComponent {
  public n : number = 1;
  console.log(this);
}

我得到与上面相同的错误。为什么我们不能在这个地方访问它。我想，this是指JavaScript中的当前上下文。

提前致谢。

Answer 1

这不是有效的打字稿代码。你不能在类的主体中进行方法调用。

export class AppComponent {
  public n: number = 1;
  setTimeout(function() {
    n = n + 10;
  }, 1000);
}

而是在类的构造函数中移动 setTimeout 调用。

export class AppComponent {
  public n: number = 1;

  constructor() {
    setTimeout(() => {
      this.n = this.n + 10;
    }, 1000);
  }

}

同样在TypeScript中，您只能通过此来引用类属性或方法。

Answer 2

您应该将处理放入类构造函数或OnInit挂钩方法。

Angular2 - TypeScript：在AppComponent中超时后递增一个数字

2 个答案: