angularcli 第二篇（数据绑定、属性申明、绑定属性）

1、数据绑定

• 插值绑定： <li>{{ hero.name }} </li>       或       <div  class = "{{ demo }}" >...</div>
• 绑定HTML： <div  [innerHTML] = "...." > </div>
• 属性绑定：  <input  [value] = "myData" />      或     <div  [ id ] = "id"   [title] = "msg" >...</div>
• 事件绑定： <button (click) = "selectHero(hero)" > </button>
• 双向数据绑定： <input  [(ngModule)] = "hero.name"/>

注：涉及input表单时要引入 FormsModule模块:    import{ FormsModule } from '@angular/forms';

2、属性声明

数据要先声明，后绑定。

（1）title = '这里是标题';

 

（2）msg:any;      // 注：any为任意类型

 this.msg = ' 这是一条msg ';      // 先定义类型，后赋初始值

 

（3）msg: string = ' 这是一条string类型的msg ';

 

（4）public msg = ' 张三 ';

注：public   公有类，可以在这个类里面使用，也可以在类外面使用

protected  保护类型，只能在当前类和它的子类使用

private  私有类，只能在当前类才能访问这个属性

 

（5）public msg : string = ' 这是一个string类型的公有类 ';

 

（6）定义样式选择器 id 的值：

public id = ' 123 ';

绑定属性：HTML通过 <div id = " {{ id }} " >.......</div> 来定义id的值

 

（7）绑定 title 的值，同时鼠标瞄上去会提示msg的值：

title = ' 这里是标题 ';

msg : string = ' 这里是小提示 ';

绑定属性：HTML里 <div  [title] = "msg">......</div>

 

（8）定义数组，并赋值：

public list = [ ];

this.list  = [ '111' , '222' , '333' ];