1、通过文本框输入,向数组添加数据
<!-- 通过文本框输入,向数组添加数据 push --> <input type="text" name="111" [(ngModel)]="username"> <button (click)="addData()">增加</button> <ul> <li *ngFor='let item of list'> {{item}} </li> </ul> export class TodolistComponent implements OnInit { public username:any=''; public list=[]; addData(){ this.list.push(this.username);/*向数组推数据*/ } }
2、删除数组的数据
<!-- 删除数组的数据 splice --> <input type="text" name="111" [(ngModel)]="username"> <button (click)="addData()">增加</button> <ul> <li *ngFor='let item of list ;let i=index;'> {{item}} ------ <button (click)='deleteData(i)'>删除</button> </li> </ul> export class TodolistComponent implements OnInit { public username:any=''; public list=[]; addData(){ this.list.push(this.username); /*向数组推数据*/ } deleteData(aaa){ /* 将索引值i赋给aaa */ this.list.splice(aaa,1); /*删除数组的数据*/ } }
3、按下键盘回车“Enter”向数组添加数据
- 实现的功能:在input框中输入数据,前面是通过按下按钮数据添加到数组中,现在要改成按下回车键:
- 步骤:
(1)给input增加鼠标监听事件:
通过keyup / keydown监听鼠标是否按下input框(鼠标监听事件keyup / keydown,鼠标按下、抬起增加触发事件)。
(2)怎么知道我们在键盘上按的是哪个键?
通过事件对象 $event,来获取鼠标所监听的对象(即:input)在键盘上按下哪个键。
代码: <input type="text" [(ngModel)]="username" (keyup)="addData($event)"> <ul> <li *ngFor='let item of list;let i=index;'> {{item}} ------ <button (click)='deleteData(i)'>删除</button> </li> </ul> export class TodolistComponent implements OnInit { public username:any=''; public list=[]; addData(e){ /* console.log(e); */ if (e.keyCode==13) { this.list.push(this.username) /* 在input框中输入数据,按下回车键,数据添加到数组中 */
this.username=''; /* 输入数值回车之后,清空输入框 */ } } deleteData(aaa){ this.list.splice(aaa,1); /*删除数组的数据*/ } }
3、将数组列表分成“已完成”和“未完成”,通过按钮来转换
- 实现的功能:点击 “改变状态” 切换数据的状态、点击 “删除” 就删除该条数据。
- 思路:为每一条数据添加一个状态,值为 “1” 或 “2” ; 再加一个按钮,这个按钮的作用就是改变状态的值; 通过条件判断,状态为1时显示“正在进行”,状态为2时显示“已完成”。
- 步骤:
(1)定义一个对象,对象里包括数据内容、状态 var obj={ username:this.username , status:1 }
(2)向数组中推入这个对象,将 this.list.push(this.username) 改成 this.list.push(obj);
(3)HTML中: 将 {{item}} 改成 {{item.username}}
(4)添加一个button,点击事件改变 status 的值 changeData(bbb) { this.list[bbb].status=2; }
(5)在 <li> 标签中添加条件判断语句 *ngIf='status==1' 或者 [hidden]='status==2' 来控制显示和隐藏
注:一个元素上边没法绑定多个模板, <li> 标签上已经绑定了*ngFor,所有这里用 [hidden]。
<label>输入框:</label> <input type="text" [(ngModel)]="username" (keyup)="addData($event)"> <h2>正在进行:</h2> <ul> <li *ngFor='let item of list ;let i=index;' [hidden]='item.status==2'> <!-- status=2时隐藏 --> <button (click)='changeData(i)'>改变状态</button> {{item.username}} ----- {{item.status}} <!-- 获取对象中的username和status --> <button (click)='deleteData(i)'>删除</button> </li> </ul> <h2>已经完成:</h2> <ul> <li *ngFor='let item of list ;let i=index;' [hidden]='item.status==1'> <!-- status=1时隐藏 --> <button (click)='changeData(i)'>改变状态</button> {{item.username}}-----{{item.status}} <button (click)='deleteData(i)'>删除</button> </li> </ul>
typescript代码:
export class TodolistComponent implements OnInit {
public username:any='';
public list=[];
constructor() { }
ngOnInit() {
}
addData(e){
var obj={ /* 定义一个对象 */
username:this.username,
status:1
}
if (e.keyCode==13) {
this.list.push(obj); /* 向数组中添加对象obj */
this.username=''; /* 清空输入框 */
}
}
changeData(bbb){ /*改变状态*/
this.list[bbb].status=2;
}
deleteData(aaa){
this.list.splice(aaa,1); /*删除数组的数据*/
}
}