tip：
數(shù)據(jù)的雙向綁定（數(shù)據(jù)的雙向綁定只是針對表單）
實現(xiàn)數(shù)據(jù)的雙向綁定需要在app_module.ts（根模塊）中進(jìn)行注冊一些東西
import {FormsModule} from '@angular/forms';
@NgModule中的imports中進(jìn)行聲明一下FormsModule
html:
<div class="form">
<p>人員登錄系統(tǒng)</p>
<ul>
<li>姓名：<input type="text" [(ngModel)]="peopleInfo.username"></li>
<li>寫別：<input type="radio" name="sex" value="1" [(ngModel)]="peopleInfo.sex"><label [for]="sex1">男</label>
? <input type="radio" name="sex" value="2" [(ngModel)]="peopleInfo.sex"><label [for]="sex2">女</label>
</li>
<li>
城市:<select [(ngModel)]="peopleInfo.city">
<option *ngFor="let item of peopleInfo.citylist" [value]="item">{{item}}</option>
</select>
</li>
<li>愛好：<span *ngFor="let item of peopleInfo.hobby;let key=index">
<input type="checkbox" [id]="'checked'+key" [(ngModel)]="item.checked">
<label [for]="'checked'+key">{{item.title}}</label>
</span>
</li>
<li>描述：<textarea [(ngModel)]="peopleInfo.mark">{{mark}}</textarea></li>
<li><button (click)="dosubmit();" class="submit">提交</button></li>
</ul>
</div>
ts中：
public peopleInfo:any={
username:"",
sex:"1",
city:"北京",
citylist:["北京","上海","深圳"],
hobby:[
{title:"吃飯",checked:true},
{title:"睡覺",checked:false},
{title:"打豆豆",checked:false}],
mark:""
};
dosubmit(){
console.log(this.peopleInfo);
}
select 難點詳解：
[(ngmodle)]是雙向綁定的寫法，propleInfo.sex在ts中的值為1混卵，默認(rèn)為男拙泽，
（判斷peopleInfo拯勉。sex是否為1竟趾，是則為選中，判斷的依據(jù)是peopleInfo.sex的值是否和當(dāng)前的value的值相等宫峦，相等則為選中岔帽，反之未選中），
當(dāng)點擊為女的時候导绷，將女的值傳遞給sex
select中：*ngFor="let item of peopleInfo.citylist" 循環(huán)獲取到對象中的城市列表中的值犀勒，{{item}}是為循環(huán)出來的值，
[value]="item"是為：value屬性的值為item ,此時的value的值是和循環(huán)出來的值為相同妥曲。
[(ngModel)]="peopleInfo.city" 綁定city是因為城市選項中綁定的一些值都是在select的時候有一個值贾费，故此要給select標(biāo)簽進(jìn)行一次綁定數(shù)據(jù)，
當(dāng)發(fā)現(xiàn)peopleInfo.city的值和option中的哪一個[value]="item"相等時檐盟。如果相等就選中那個option,同理褂萧，當(dāng)option改變的時候，也會重新在賦值
給peopleInfo.city遵堵。同時箱玷，當(dāng)我們在option選擇一個值的時候也是最終顯示在select的標(biāo)簽之中怨规，所以在此select進(jìn)行數(shù)據(jù)綁定也就行得通了，在頁面中看不到的可以通過
console.log來查看
checkbox 難點詳解：
*ngFor="let item of peopleInfo.hobby;let key=index"循環(huán)peopleInfo對象下的hobby中的值锡足，key=index是為索引波丰，[id]和[for]的值是一樣的是為了進(jìn)行對應(yīng)
所以寫成：[for]="'checked'+key"，[id]="'checked'+key"都是為了拿到chedked值舶得，[(ngModel)]="item.checked"是為了檢測是否選中掰烟，在愛好選項中只有第一個值為true,
其他為false，但是只要點中一個就要進(jìn)行改變其checked的值沐批，所以這是時候就會把itemed.checked的值賦值給ts中的checked,從而實現(xiàn)雙向綁定纫骑。
