אנגולר - Angular2 - TypeScript: הגדל מספר אחרי פסק זמן ב-AppComponent

אני רוצה ליצור אפליקציה פשוטה ב-Angular2 באמצעות TypeScript. זה נראה די פשוט, אבל אני לא מצליח להשיג את מה שרציתי.

אני רוצה להציג ערך של תכונה בתבנית. ואני רוצה לעדכן את אותו הדבר אחרי שנייה אחת באמצעות setTimeout.

קוד Plunkr כאן: קוד ב-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. אם אני לא טועה, אנחנו יכולים להשתמש גם ב-JavaScript טהור ב-TypeScript.

אני אפילו ניסה

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

אבל אני לא מצליח לראות את הערך של n בקונסולה.

כאשר ניסיתי

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

אני מקבל את אותה השגיאה כמו למעלה. למה אנחנו לא יכולים לגשת לזה במקום הזה. אני מניח, this מתייחס להקשר הנוכחי כמו ב-JavaScript.

תשובה #1

זו לא קוד TypeScript חוקי. אי אפשר לבצע קריאות לשיטות בגוף של מחלקה.

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

במקום זאת העבר את הקריאה ל-setTimeout לבנאי של המחלקה. בנוסף, השתמש בפונקציית החץ => כדי לקבל גישה ל-this.

export class AppComponent {
  public n: number = 1;

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

}

ב-TypeScript, ניתן להתייחס למאפייני המחלקה או לשיטות שלה רק דרך this. זו הסיבה שהפונקציה החץ => חשובה.

תשובה #2

אתה צריך לשים את העיבוד שלך בקונסטרקטור של המחלקה או בשיטת ה-OnInit hook.