如何在Angular 7中创建Todo列表

ToDo应用程序是用来帮助我们记住一些重要的任务。我们只需添加任务，完成后就可以删除它们。这个待办事项列表使用了各种Bootstrap类，使我们的网络应用不仅有吸引力，而且反应灵敏。

步骤:

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

ng new my-todo-list

2. 通过CD和运行移动到应用程序内部。之后，打开本地主机，检查应用程序是否工作。

cd my-todo-list
ng serve

3. 使用以下命令安装bootstrap。

npm install bootstrap

编辑项目中的style.css文件

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

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

<!--Division for GeeksForGeeks heading-->
    <div class="container-fluid">
        <div class="row bg-success justify-content-center
                align-items-center" style="height:80px">
            <div class="col-3"></div>
            <div class="col-6 text-light h2">
                GeeksForGeeks
            </div>
        </div>
      
        <!--Division for taking input from user -->
        <div class="row mt-1" style="height:80px;">
            <div class="col-3 d-none col-md-3 d-md-block"></div>
            <div class="col-12 col-md-6 bg-success d-flex 
                        justify-content-center align-items-center 
                        text-light h3">
      
                <input [(ngModel)]="newTask" type="text" 
                        value="" class="col-7 form-control"
                            style="width:300px;">
      
                <div class="col-1"></div>
      
                <button (click)="addToList()" 
                    class="btn btn-light text-success">
                    ADD TASK
                </button>
            </div>
      
            <div class="col-3 d-none col-md-3 d-md-block"></div>
        </div>
      
        <!--Tasks added repeated divisions-->
        <div *ngFor="let x of items; let index = index;" 
                class="row mt-1" style="height:100px;">
      
            <div class="col-3 d-none col-md-3 d-md-block"></div>
      
            <div class="col-12 col-md-6 bg-success d-flex
                        justify-content-center align-items-center
                        text-light h3">
      
                <div class="col-9 text-light h3">{{x}}</div>
      
                <input (click)="deleteTask(index)" type="button"
                    value="Delete" class="col-2 btn btn-danger">
            </div>
              
            <div class="col-3 d-none col-md-3 d-md-block"></div>
        </div>
    </div>

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'

输出: