一、angualr4.0 绑定数据
1、数据文本绑定
{{}}
<h1>
{{title}}
</h1>2、绑定 html
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>" <div [innerHTML]="h"></div>
二、 数据循环 *ngFor
1、ngFor 普通循环
ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>2、循环的时候设置 key
<ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul>其他复杂list
Html
<ul>
<li *ngFor="let item of list3; let key=index">
{{item.title}}---{{key}}
</li>
</ul>ts
this.list3=[
{'title':'1111111111111111111'},
{'title':'22222222222222222'},
{'title':'3333333333333333333'}
];Html
<ul>
<li *ngFor="let item of list4; let key=index">
{{item.catename}}---{{key}}
<ol>
<li *ngFor="let car of item.list">
-- {{car.title}}
</li>
</ol>
</li>
</ul>ts
this.list4=[
{
'catename':"宝马",
"list":[
{'title':'宝马x1'},
{'title':'宝马x3'},
{'title':'宝马x2'},
{'title':'宝马x4'},
]
} ,{
'catename':"奥迪",
"list":[
{'title':'奥迪q1'},
{'title':'奥迪q2'},
{'title':'奥迪q3'},
{'title':'奥迪q4'},
]
},
]3、template 循环数据
<ul>
<li template="ngFor let item of list">
{{item}}
</li>
</ul>三、条件判断 *ngIf
<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p> <p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
四、执行事件 (click)=”getData()”
<button class="button" (click)="getData()"> 点击按钮触发事件 </button> <button class="button" (click)="setData()"> 点击按钮设置数据 </button>
getData(){ /*自定义方法获取数据*/
//获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}五、绑定属性
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
六、表单处理
<input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){
console.log(e)
if(e.keyCode==13){
alert('按回车了');
}
}七、双向数据绑定
在文本框输入的值实时变动到ts代码的变量中
<input [(ngModel)]="inputValue">
注意引入：FormsModule
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }使用
<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}八、Todolist 功能
Html
<input type="text" [(ngModel)]='username'>
<button (click)='addData()'>增加</button>
<ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>ts
export class TodolistComponent implements OnInit {
list:any[];
username:any;
constructor() {
}
ngOnInit() {
this.list=[];
this.username='';
}
addData(){
alert(this.username);
this.list.push(this.username);
}
}