Angular2 - TypeScript: Erhöht eine Zahl nach dem Timeout in AppComponent

Ich möchte erstellen Sie eine einfache Angular2 Anwendung mit TypeScript. Scheint, ziemlich einfach, aber ich bin nicht in der Lage zu erreichen, was ich wollte.

Möchte ich zeigen, eine Eigenschaft-Wert in der Vorlage. Und ich möchte, dass Sie das update nach 1 Sekunde mit setTimeout.

Plunkr Code ist hier : Code auf Plunkr

Was ich geschrieben habe, ist hier :

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);
}

Wenn ich diese code bekomme ich folgenden Fehler :

Uncaught SyntaxError: Unexpected token ;

Warum bin ich nicht in der Lage, Zugang n, die sich im gleichen Bereich wie wir verwendet zu tun, die in JavaScript. Wenn ich mich nicht Irre, können wir mit reinem JavaScript zu TypeScript.

Ich habe sogar versucht

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

Aber ich bin nicht in der Lage, um den Wert n in der Konsole.

Als ich versuchte

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

Erhalte ich die gleiche Fehlermeldung wie oben. Warum kann nicht wir Zugang zu diesem Ort. Ich denke, this bezieht sich auf den aktuellen Kontext, wie in JavaScript.

Vielen Dank im Voraus.

InformationsquelleAutor der Frage Mahisha | 2015-12-30

  1. 64

    Dies ist kein Gültiger typescript-code. Sie können nicht über Methodenaufrufe, die in den Körper einer Klasse.

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

    Stattdessen verschieben Sie die setTimeout Anruf in der Konstruktor der Klasse.

    export class AppComponent {
  public n: number = 1;

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

}

    Auch in TypeScript können Sie beziehen sich auf Eigenschaften von Klassen oder Methoden nur über diese.

    InformationsquelleAutor der Antwort toskv

  2. 6

    Dann sollten Sie Ihre Verarbeitung in die Klasse ein Konstruktor oder eine OnInit hook-Methode.

    InformationsquelleAutor der Antwort Thierry Templier

Schreibe einen Kommentar