如何在Angular 7中创建待办事项列表？

ToDo应用程序用于帮助我们记住一些重要任务。我们仅添加任务，完成后将其删除。此待办事项列表使用各种Bootstrap类，这些类使我们的Web应用程序不仅有吸引力，而且响应迅速。

方法：

1. 使用以下命令创建一个新的angular应用程序：

   ng new my-todo-list

2. 通过cd在应用内移动并运行。之后，打开本地主机，然后检查该应用程序是否正常运行。

   cd my-todo-list
   ng serve

3. 使用以下命令安装引导程序：

   npm install bootstrap

   在项目中编辑style.css文件

   @import 'bootstrap/dist/css/bootstrap.css';
   

4. 打开src / app文件夹并开始编辑app.component.html

   
   
       
   
           
   
           
   
               GeeksForGeeks
           
       
     
       
       
   
           
   
           
   
     
               
     
               
   
     
               
                   ADD TASK
               
           
     
           
   
       
     
       
       
   
     
           
   
     
           
   
     
               
   {{x}}
     
               
           
             
           
   
       
   
   

5. 打开app.component.ts文件，并编写用于添加和删除任务的函数。

   import { Component } from '@angular/core';
     
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     
       /* An empty array that is responsible
          to add a division */
       public items = [];
     
       /* A two-way binding performed which
          pushes text on division */
       public newTask;
     
     
       /* When input is empty, it will
          not create a new division */
       public addToList() {
           if (this.newTask == '') {
           }
           else {
               this.items.push(this.newTask);
               this.newTask = '';
           }
       }
     
       /* This function takes to input the
          task, that has to be deleted*/
       public deleteTask(index) {
           this.items.splice(index, 1);
       }
   }
   

6. 为了处理需要输入的表单，我们必须在app.module.ts文件中导入FormsModule。

   import { FormsModule } from '@angular/forms'

输出：