Angular表单数据模型之双向绑定（MVVM）实现ToDoList功能

继续之前ng 学习笔记的补充，使用 html 表单模仿京东/JD 搜索记录页面，大概需求如下：

当用户在搜索框中输入信息，点击【搜索🔍】按钮或者敲回车【Enter】按键时，把用户输入的信息保存，并且对信息归类：【代办事项】或【已办事项】，添加搜索信息的时候记录添加时间，每项信息可以被删除，默认保存信息为【代办事项】，当历史信息被选择时，进入【已办事项】，实现大概页面如下：

了解上面的需求后，接下来开始动手实现：

• 创建Angular项目demo01, 使用Angular CLI 创建命令 =》【ng new demo01】;
• 新建组件JdAppToDoList, CLI创建命令 =》【ng generate component components/JdAppToDoList】;
• 组件页面构建和逻辑功能实现；

组件创建后，默认会产生四个文件，分别是.css/.html/.spec.ts/.ts ：

在【app.module.ts】文件中引入组件【JdAppToDoList】 同时申明：

//引入组件JdAppToDoList
import { JdAppToDoListComponent } from './components/jd-app-to-do-list/jd-app-to-do-list.component';

@NgModule({
  declarations: [
    AppComponent,
    JdAppToDoListComponent //声明组件JdAppToDoList
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后把创建的组件挂载在根文件【app.component.html】中，运行测试，是否正常显示：

<app-jd-app-to-do-list></app-jd-app-to-do-list>

构建 html 代码如下：【jd-app-to-do-list.component.html】

<section id="bgSection">
    <ul id="ul">
        <li [ngStyle]="{'background-color': '#333','color':'#999'}">ToDoList</li>
        <li>
            <br/>
            &nbsp;搜索 <input type="text" name="search" id="search" (keydown)="keyDownAddSearch($event)" [(ngModel)]="searchItem" />&nbsp;<button (click)="addSearch()">🔍</button>
        </li>
        <li>
            <br/>
            <strong>&nbsp;【待办事项】：</strong>
            <ol>
                <li>
                    <span *ngFor="let item of todoList; let key=index" >
                        <section *ngIf="!item.checked" [ngStyle]="{'color': 'red','border':'1px solid orange'}">
                            <input type="checkbox" [value]="item.title" [name]="item.title" [id]="'item'+key"  [(ngModel)]="item.checked" /> 
                            <label [for]="'item'+key"> {{item.title}} </label> <br/>
                            <span>{{item.time | date:'yyyy/MM/dd & HH-mm-ss'}}</span> &nbsp;
                            <button title="删除" [ngClass]="{'btn': true}" (click)="deleteHistryItem(key)">X</button><br/>
                        </section>
                    </span>
                </li>
            </ol>
        </li>
        <li>
            <br/>
            <strong>&nbsp;【已办事项】：</strong>
            <ol>
                <li>
                    <span *ngFor="let item of todoList; let key=index">
                        <section *ngIf="item.checked"  [ngStyle]="{'color': 'green','border':'1px solid orange'}">
                            <input type="checkbox" [value]="item.title" [name]="item.title" [id]="'item'+key" [(ngModel)]="item.checked" /> 
                            <label [for]="'item'+key"> {{item.title}} </label><br/>
                            <span>{{item.time | date:'yyyy-MM-dd / HH-mm-ss'}}</span> &nbsp;
                            <button title="删除" [ngClass]="{'btn': true}" (click)="deleteHistryItem(key)">X</button><br/>
                        </section>
                    </span>
                </li>
            </ol>
        </li>
        <li>
            <br/>
            <strong [ngStyle]="{'color': 'red'}">&nbsp; {{titleMsg}} </strong>
        </li>
        <li><br/></li>
    </ul>
</section>

构建ts代码如下：【jd-app-to-do-list.component.ts】

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-jd-app-to-do-list',
  templateUrl: './jd-app-to-do-list.component.html',
  styleUrls: ['./jd-app-to-do-list.component.css']
})
export class JdAppToDoListComponent implements OnInit {

  public searchItem:string = ''; //搜索关键字
  public todoList:Array<object> =[]; //搜索历史
  public titleMsg:string = ''; //提示信息

  constructor() { }

  ngOnInit():void {
  }

  //敲回车【Enter】键执行添加搜索项
  keyDownAddSearch(e:any): void {
    if (e.keyCode == 13) {
      this.addSearch();
    }
  }

  //添加搜索记录
  addSearch():void {
    this.titleMsg = '';
    if (this.searchItem !='') {
      let isHas: boolean = this.checkHasItem(this.todoList, this.searchItem);
      if (!isHas) {
        let item: object = {
          title: this.searchItem,
          time: new Date(),
          checked: false
        };
        this.todoList.push(item);
      } else {
        this.titleMsg = '提示：历史中已经存在！';
      }
      this.showHistrySearch();
    }else{
      this.titleMsg = '提示：请输入要查找的信息！';
    }
  }

  //检查列表中是否存在重复项目
  checkHasItem(list:any, seachVal:string):boolean {
    for (let i = 0; i < list.length; i++) {
      const item = list[i];
      if (item.title==seachVal) {
        return true;
      }
    }
    return false;
  }

  //显示搜索历史信息
  showHistrySearch(): void{
    console.log(this.todoList);
  }

  //删除历史记录项
  deleteHistryItem(i:string):void {
    this.todoList.splice(parseInt(i),1);
  }
}

由于页面样式比较单一，组件中【jd-app-to-do-list.component.css】就未做页面美化，注意，上面代码构建完成后，表单的双向数据模型绑定需要引入模块【FormsModule】，最终【app.module.ts】配置如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //MVVM 需要导入

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//引入组件JdAppToDoList
import { JdAppToDoListComponent } from './components/jd-app-to-do-list/jd-app-to-do-list.component';

@NgModule({
  declarations: [
    AppComponent,
    JdAppToDoListComponent //声明组件JdAppToDoList
  ],
  imports: [
    BrowserModule,
    FormsModule, //声明模块FormsModule
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最终实现功能逻辑如下：

写在最后的一点总结，此处演示demo应用的知识点如下：

• 如何创建ng项目；
• 如何构建组件【component】以及页面挂载；
• 表单元素【文本框，多选框以及按钮】应用；
• ng 指令（ngIf/ngFor/ngClass/ngStyle）应用;
• ng 双向数据绑定（MVVM）;
• 对象数据模型构建；
• 事件/方法（click/keydown）应用；
• 管道【pipe】数据解析应用；