Day06 Angular牙起來 - 程式面介紹 繫結綁定1 雙大括號綁定法

接下來要切換到程式面來看看，就是Typescript！

綁定成員（變數） - Binding

打開 role.component.ts 檔案
在程式的class內新增一個 變數: 血量hp

其實在這使用 變數 variable 稱呼其實不準確，正確來說是物件底下的 成員 member
後面講到Typescript章節時會重新提及，在此請先忽略

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

@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})
export class RoleComponent implements OnInit {
  hp = 5;

  constructor() { }

  ngOnInit(): void {
  }

}

內嵌繫結 interpolation

然後在樣板上透過兩個大括號 {{}} 來顯示出此變數
把變數（成員）當前的數值，從Typescript中顯示到HTML畫面上

修改 role.component.html

<h2>角色區塊</h2>
<div>血量: {{hp}}</div>

完成畫面，血量出來了！

只有血量還不夠，還必須要有一個酷炫的名字

修改 role.component.ts

...

export class RoleComponent implements OnInit {
  hp = 5;
  name = '初心冒險者';

  constructor() { }

  ngOnInit(): void {
  }
}

接著修改 role.component.html

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>

完成畫面

數字會動的變數

修改 role.component.ts，在 ngOnInit() 裡加入 setInterval function

export class RoleComponent implements OnInit {
  hp = 5;
  name = '初心冒險者';

  constructor() { }

  ngOnInit(): void {
    setInterval(() => {
      this.hp += 1;
    }, 1000)
  }
}

血量會隨著秒數每秒增加！

可以看出Angular綁定變數，畫面及時的渲染、顯示最新的值出來
而非死的一坨在那一動也不動

恭喜到這一步，已經學成40%的Angular！