tip:
数据的双向绑定(数据的双向绑定只是针对表单)
实现数据的双向绑定需要在app_module.ts(根模块)中进行注册一些东西
import {FormsModule} from '@angular/forms';
@NgModule中的imports中进行声明一下FormsModule
html:
人员登录系统
- 姓名:
- 写别:
-
城市:
- 爱好:
- 描述:
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,默认为男,
(判断peopleInfo。sex是否为1,是则为选中,判断的依据是peopleInfo.sex的值是否和当前的value的值相等,相等则为选中,反之未选中),
当点击为女的时候,将女的值传递给sex
select中:*ngFor="let item of peopleInfo.citylist" 循环获取到对象中的城市列表中的值,{{item}}是为循环出来的值,
[value]="item"是为:value属性的值为item ,此时的value的值是和循环出来的值为相同。
[(ngModel)]="peopleInfo.city" 绑定city是因为城市选项中绑定的一些值都是在select的时候有一个值,故此要给select标签进行一次绑定数据,
当发现peopleInfo.city的值和option中的哪一个[value]="item"相等时。如果相等就选中那个option,同理,当option改变的时候,也会重新在赋值
给peopleInfo.city。同时,当我们在option选择一个值的时候也是最终显示在select的标签之中,所以在此select进行数据绑定也就行得通了,在页面中看不到的可以通过
console.log来查看
checkbox 难点详解:
*ngFor="let item of peopleInfo.hobby;let key=index"循环peopleInfo对象下的hobby中的值,key=index是为索引,[id]和[for]的值是一样的是为了进行对应
所以写成:[for]="'checked'+key",[id]="'checked'+key"都是为了拿到chedked值,[(ngModel)]="item.checked"是为了检测是否选中,在爱好选项中只有第一个值为true,
其他为false,但是只要点中一个就要进行改变其checked的值,所以这是时候就会把itemed.checked的值赋值给ts中的checked,从而实现双向绑定。