angular 实现一个组件：搜索历史展示

1 新建angular 项目

cmd 命令行模式下到项目路径执行：   ng new angularName --skip-install

导入模块 : cnpm install

2 新建组件

ng g component components/search

3 跟组件中引入组件

4 表单模块引入

双向绑定需要在app.module.ts中加入：

 

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SearchComponent } from './components/search/search.component';

import {FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5 编辑html

删除时，可以在调用删除方法传入元素在array的index，达到删除效果

<input type="text" [(ngModel)]="inputString">   <button (click)="doSearch()">搜索</button>
<hr>
搜索历史：<br>

<li *ngFor="let item of history;let key =index;">{{item}} <button (click)="doDelete(key)">X</button></li>
<hr>

6编写ts

数组的splice()方法

this.history.splice(index,1);//表示删除下标为index处的元素

 this.history.splice(0,0,this.inputString);//表示在0处添加inputString

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

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  inputString:''

  history:any=[
    
  ]


  doSearch(){
    if(this.inputString==null){
      return;
    }
    let index = this.history.indexOf(this.inputString);
    if(index>=0){
      this.history.splice(index,1);
    }
    this.history.splice(0,0,this.inputString);
  }

   doDelete(key){
     console.log(key);
     this.history.splice(key,1);
   }
}

7效果

点击搜索之后，展示历史关键字，并且可以删除。

 

另外一个类似组件：

功能是：输入需要做的任务，加入到准备执行的列表，能删除，勾选之后，进入已完成清单。

html:

Add to do:<input type="text" [(ngModel)]="inputString" (keyup)="doSearch($event)">   
<br>
To Do List：<br>
<div class="searchHistory">
    <!--//根据item.doneFlag的值判断是否是准备做的事情，为0则是准备做的事情-->
    <li *ngFor="let item of toDoList;let key =index;" [hidden]="item.doneFlag==1">
        <input type="checkbox"  [(ngModel)]="item.doneFlag"/>{{item.title}} 
        <button (click)="doDelete(key)">X</button>
    </li>
</div>
Done List:
<div class="searchHistory">
    <!--//根据item.doneFlag的值判断是否是准备做的事情，为0则是准备做的事情-->
        <li *ngFor="let item of toDoList;let key =index;" [hidden]="item.doneFlag==0">
            <input type="checkbox" [(ngModel)]="item.doneFlag"/>{{item.title}} 
            <button (click)="doDelete(key)">X</button>
        </li>

</div>

ts代码：

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

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

  constructor() { }
  inputString:string=''

  toDoList=[];

  ngOnInit(): void {
  }
//键盘事件，判断当回车键弹起时
//是否加入任务清单
//checkbox选择之后，在已完成列表展示，
  doSearch(e){
    if(this.inputString==null){
      return;
    }
    console.log(e.keyCode);
    if(e.keyCode==13){
      if(!this.check()){
        this.toDoList.push({title:this.inputString,doneFlag:0});
        this.inputString='';
      }
    }
 
  }

   doDelete(e){
     console.log(e);
     this.toDoList.splice(e,1);
   }

   check(){
     let flag = false;
     this.toDoList.forEach(element => {

       console.log("title--"+element.title)
        console.log("inputString--"+this.inputString)
       if(element.title==this.inputString){
          flag= true;
       }
     });
     return flag;
   }

}