Angularjs4.0 Todolist功能

幽梦林子

Angularjs4.0 如何实现Todolist的功能呢？下面让我们来为大家做详细介绍：

html代码

1. <input type="text" [(ngModel)]='username'>
   
2. 
   
3. <button (click)='addData()'>增加</button>
   
4. 
   
5. <ul>
   
6.   <li *ngFor="let item of list">
   
7.      {{item}}
   
8.   </li>
   
9. </ul>

复制代码

Js代码

1. export class TodolistComponent implements OnInit {
   
2. 
   
3.    list:any[];
   
4.    username:any;
   
5. 
   
6.    constructor() {
   
7.      
   
8.    }
   
9. 
   
10.   ngOnInit() {
    
11.     this.list=[];
    
12.     this.username='';
    
13. 
    
14.   }
    
15.   addData(){
    
16. 
    
17.       alert(this.username);
    
18. 
    
19.       this.list.push(this.username);
    
20.   }
    
21. 
    
22. }
    
23. 
    

复制代码