Angular - 튜토리얼03

1) app.component.ts

import { Component } from '@angular/core';

const array : Array<string> = ['data0','data1','data2'];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title : string = 'firstStudy';

  constructor() { 

  }
  public clickAfterPrint () : void{
    this._innerFunc();
    console.log(array);
    console.log(this.title);
  }
  private _innerFunc() {
    array.push('data' + array.length);
  }
}

 

* 클래스 안에 사용하는 함수 또는 클래스 변수는 this를 사용하지만, 클래스 외부에서 선언한 변수 및 함수는 this를 사용하지 않습니다.

2)

app.component.ts

import { Component } from '@angular/core';

const array : Array<string> = ['data0','data1','data2'];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title : string = 'firstStudy';

  showArray : Array<string>;

  constructor() { // 생성자는 오직 1번만 클래스 파일이 생성될 때 동작합니다.
    this.showArray = array;
  }
  public clickAfterPrint () : void{
    this._innerFunc();
    console.log(array);
    console.log(this.title);
  }
  private _innerFunc() {
    array.push('data' + array.length);
  }
}

app.component.html

<button (click)="clickAfterPrint()">{{title}} <- 당신이 입력한 변수 title</button>
<div *ngFor="let item of showArray">{{item}}</div>