iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

Angular初期筆記系列 第 8

DAY8-Angular6之data binding-Interpolation

[1]Data binding

一個流程允許應用程式去顯示 data values 到 使用者端和反應使用者功能(像是 click 、touches、keystrokes)

使用 data binding ,你要宣告 Html 組件 和 data 來源是有關連的,並讓 framework 處理細節,Data binding 是一個可以選擇推播應用程式的 data value 到 HTML,附加 event listeners 、 從螢幕拖曳改變值 和更新應用程式的 data values
繫結在表單上的Template 語法

  • Interpolation (插入)
  • Property binding (屬性繫結)
  • Event binding (事件繫結)
  • Attribute binding (屬性繫結)
  • Class binding (類別繫結)
  • Style binding (樣式繫結)
  • Two-way data binding with ngModel (使用 ngModel 的 雙向繫結)

Interpolation (中文:插入)

符號:{{變數}}
說明:你可以使用 Interpolation 去編織計算字串 到 text 中,可以用於 html element 標籤中也可以用於 html 屬性內[2]
使用方法

  • 一般使用
  • 數字相加
  • 使用方法
  • 用在 html 屬性上

一般使用

src\app\app.component.ts
-----
export class AppComponent {
    title = 'app';
}
src\app\app.component.html
-----
<h1>
    Welcome to {{ title }}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181017/2010775466sIUxx37d.png

數字相加

src\app\app.component.html
-----
<h1>
    Welcome to {{ 1+2+3 }}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181017/20107754x9ObSDLBvd.png

使用方法

src\app\app.component.ts
-----
export class AppComponent {
    getValue() {
        return 2;
    }
}
src\app\app.component.html
-----
<h1>
    Welcome to {{ 1 + getValue() }}!
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181017/20107754Z9ffDkogss.png

用在 html 屬性上

src\app\app.component.ts
-----
export class AppComponent {
    defaultValue = '預設的值';
}
src\app\app.component.html
-----
<h1>
    <input type="text" value="{{defaultValue}}">
</h1>

顯示
https://ithelp.ithome.com.tw/upload/images/20181017/201077547VV4oZ8OLW.png

參考來源

[1]
data binding
[2]
Interpolation


上一篇
DAY7-Angular6之「IT狗的生活」開演/@NgModule項目
下一篇
DAY9-Angular6之data binding-Property和Event
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言