Angular 8 基礎

1. 綁定資料

Angular 中使用{{}}綁定業務邏輯裡面定義的資料

資料文本綁定：

綁定 html：

綁定屬性：

1. 資料循環*ngFor

*ngFor 普通循環

循環的時候設定 key

template 循環資料

1. 條件判斷 *ngIf

1. *ngSwitch

1. 執行事件 (click)=”getData()”

1. 表單事件

1. 雙向資料綁定

使用方式：

1. [ngClass]、[ngStyle]

[ngClass]:

[ngStyle]:

1. 管道

其他管道： http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34

建立管道：ng g pipe pipe/getAbsolute

1. ngModel

如果單獨使用ngModel，且沒有為其指派的話，它會在其所在的ngForm.value對象上添加一個property，此property的key值為ngModel所在元件設定的name屬性的值

<form novalidate #f="ngForm">

         <input type='text' name='userName' placeholder='Input your userName' ngModel>

</form>

<p>

 {{ f.value | json }} // { "userName": "" }

</p>

此時需要注意的是，單獨使用ngModel時，如果沒有為ngModel指派的話，則必須存在name屬性。

也就是說，單獨ngModel的作用是通知ngForm.value，我要向你那裡加入一個property，其key值是元件的name屬性值，其value為空字元串。

[ngModel]

可是，如果想向ngForm中添加一個有預設值的property需要怎麼做呢？這時就需要使用單向資料綁定的格式了，也就是[ngModel]：

this.model = {

         userName: 'Casear'

}; 

<form novalidate #f="ngForm">

 <input type='text' name='userName' placeholder='Input your userName' [ngModel]='model.userName'>

</form>

<p>

 {{ f.value | json }} // { "userName": "Casear" }

 {{ model | json }}  // { "userName": "Casear" }，不會随着f.value的變化而變化

</p>

這裡我們使用了單向資料綁定的特點，可以為ngForm.value添加一個帶有初始值的property。

注意單向資料綁定的特點，此時在表單輸入框中做的任何改變都不會影響model中的資料，也就是說this.model.userName不會随着輸入框的改變而改變。不過輸入框改變會展現在f.value中。

[(ngModel)]

上述的單向資料綁定在單純地提供初始值很有用，不過總是有些場景需要将使用者輸入展現在我們的model上，此時就需要雙向資料綁定了，也即[(ngModel)]：

this.model = {

 userName: 'Casear'

};

<form novalidate #f="ngForm">

 <input type='text' name='userName' placeholder='Input your userName' [(ngModel)]='model.userName'>

</form>

<p>

 {{ f.value | json }} // { "userName": "Casear" }

 {{ model | json }}  // { "userName": "Casear" }，會随着f.value的變化而變化

</p>

這裡我們不僅為ngForm.value添加了一個帶有初始值的property，還能實作Model和View層的關聯，盡管這種方式可能并不好，但是在某些情況下也不失為一種簡便的方案。

通過使用 #userName="ngModel" 方式，我們可以擷取表單控件關聯的 NgModel 對象，進而擷取目前控件的相關資訊，如控件的目前的狀态或控件驗證資訊等。

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

import               {         NgForm                 }               from               '@angular/forms';      

@                Component({      

  selector                :               'exe-app',      

  template                :               `      

    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>      

      <input name="first" ngModel required #first="ngModel">      

      <input name="last" ngModel>      

      <button>Submit</button>      

    </form>      

    <p>First name value: {{ first.value }}</p>      

    <p>First name valid: {{ first.valid }}</p>      

    <p>Form value: {{ f.value | json }}</p>      

    <p>Form valid: {{ f.valid }}</p>      

  `,})      

export               class               AppComponent               {      

onSubmit(f: NgForm)               {      

console.log(         f                .         value                );               // { first: '', last: '' }      

console.log(         f                .         valid                );               // false      

}      

}