【angular教程240107】04 Dom及表单双向数据绑定，ToDoList+service 服务+实现数据的持久化

05 Angular中Dom操作 以及表单（ input、checkbox、radio、select、 textarea ）结合双休数据绑定实现在线预约功能

0快捷键

输入法快速切换
：shitf + alt
半角 全角 ctrl+空格

Angular表单 Dom获取表单值 以及双向数据绑定

1. Angular表单 Dom获取表单值 以及双向数据绑定

1.1 首先新建一个项目

新建一个form组件

1.2 布局组件页面

form.componnet.html

<h2>人员登记系统</h2>
<div class="people_list">
    <ul>
        <li>姓 名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" value="fonm_input" /></li>
        <li>性 别：
            <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> 男
            <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> 女
        </li>
        <li>
            城 市：
            <select name="city" id="city" [(ngModel)]="peopleInfo.city">
                <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
            </select>
        </li>
        <li>
            爱 好：
            <span *ngFor="let item of peopleInfo.hobby;let key=index;">
                <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked" /> <label [for]="'check'+key">
                    {{item.title}}</label>
                &nbsp;&nbsp;
            </span>
        </li>
        <li>
            备 注：
            <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
        </li>
    </ul>
    <button (click)="doSubmit()" class="submit" style="width: 200px; border-radius: 5px;">获取表单的内容</button>
    <br>
    <br>
    <br>
    <br>
    <pre>
        <!-- 通过json把 peopleInfo信息格式化展示出来-->
    {{peopleInfo | json}} 
  </pre>
</div>

1.3 美化页面

form.component.css```
css
h2 {
text-align: center;
}

.people_list {
width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #eee;
}

li {
height: 50px;
line-height: 50px;
}
.fonm_input {
width: 300px;
height: 28px;
}
.submit {
width: 100px;
height: 30px;
float: right;
margin-right: 50px;
margin-top: 120px;
}

style.css

```css

/* 定义公共样式 */
* {
  /* 消除游览器默认内外边距 */
  padding: 0px;
  margin: 0px;
}
/* 取消列表默认的格式 */
ul,
ol {
  list-style-type: none;
}

1.4 定义数据

form.components.ts

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit {
  public peopleInfo: any = {
    username: '',
    sex: '2',
    cityList: ['北京', '上海', '深圳'],
    city: '上海',

    hobby: [
      {
        title: '吃饭',
        checked: false,
      },
      {
        title: '睡觉',
        checked: false,
      },
      {
        title: '敲代码',
        checked: true,
      },
    ],

    mark: '',
  };

  constructor() {}

  ngOnInit() {}

  doSubmit() {
    console.log(this.peopleInfo);
  }
}

1.4 运行项目
命令行在当前项目目录输入：

ng serve --open

1.4 补充,使用dom操作获取元素的值(不推荐使用,推荐使用双向数据绑定)

news.component.html

<input type="text" value="你知道我的值吗???" id="myValue" (click)="getValue()">

news.component.ts

  public getValue(): void {
    let inputValue: any = document.getElementById('myValue');
    alert(inputValue.value);
  }
1

06 Angular实现一个完整的toDoList（待办事项） 以及类似京东App搜索缓存数据功能【前面知识综合练习】

1. Angular–实现类似京东App搜索缓存功能实现&服务实现数据的持久化

1.1 京东App

1.2 Angular实现类似京东App搜索缓存功能实现

1.2.1 导入双向数据绑定的模块

app.module.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’; // 导入模块
import { AppComponent } from ‘./app.component’;
import { SearchComponent } from ‘./components/search/search.component’;

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

1.2.2 绘制页面

search.component.html

1.2.3 美化页面

search.component.css

.search {
width: 400px;
margin: 20px auto;
}
input {
margin-bottom: 20px;

width: 300px;
height: 32px;
border: 2px solid orchid;
border-radius: 5px;
}
button {
height: 32px;
width: 80px;
border-radius: 5px;
background-color: skyBlue;
}

1.2.4 声明数据和定义方法

search.component.ts

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

@Component({
selector: ‘app-search’,
templateUrl: ‘./search.component.html’,
styleUrls: [‘./search.component.css’],
})
export class SearchComponent implements OnInit {
public keyword: string;
public historyList: any[] = [];

constructor() {}

ngOnInit() {}

doSearch() {
// 数据查重
if (this.historyList.indexOf(this.keyword) == -1) {
this.historyList.push(this.keyword);
}
// 搜索后，输入栏设置为空
this.keyword = ‘’;
}

deleteHistroy(key) {
// 从historyList里面移除该数据
this.historyList.splice(key, 1);
}
}

1.3 服务实现数据的持久化

刚刚的页面虽然看起来功能实现了，但是这时候如果我们刷新了页面那么所有的数据都会消失，如果我们想要数据在刷新后依旧存在。这时候我们就需要用到服务了。

如果你还不清楚什么是服务，那么请看 Angular服务

1.3.1 创建服务

命令行在当前项目目录输入:

ng g service my-new-service

创建到指定目录下面
ng g service services/storage

1.3.2 配置服务

app.moudule.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FormsModule } from ‘@angular/forms’;
import { AppComponent } from ‘./app.component’;
import { SearchComponent } from ‘./components/search/search.component’;
import { TodolistComponent } from ‘./components/todolist/todolist.component’;

import { StorageService } from ‘./services/storage.service’; // 引入服务
@NgModule({
declarations: [AppComponent, SearchComponent, TodolistComponent],
imports: [BrowserModule, FormsModule],
providers: [StorageService], // 配置服务
bootstrap: [AppComponent],
})
export class AppModule {}

1.3.3 在组件当中定义方法

storage.service.ts

import { Injectable } from ‘@angular/core’;

@Injectable({
providedIn: ‘root’,
})
export class StorageService {
constructor() {}
// 设置数据
set(key: string, value: any) {
localStorage.setItem(key, JSON.stringify(value));
}
get(key: string) {
// return ‘this is a service’;
return JSON.parse(localStorage.getItem(key));
}
// 删除数据
remove(key: string) {
localStorage.removeItem(key);
}
}

1.3.4 在组件当中使用方法

search.component.ts

import { Component, OnInit } from ‘@angular/core’;
// 引入服务类
import { StorageService } from ‘…/…/services/storage.service’;
// 实例化服务类 可以这么使用，但是不推荐
/* var service = new StorageService();
service.get(); */
@Component({
selector: ‘app-search’,
templateUrl: ‘./search.component.html’,
styleUrls: [‘./search.component.css’],
})
export class SearchComponent implements OnInit {
public keyword: string;
public historyList: any[] = [];

constructor(public storage: StorageService) {}

// 页面刷新会触发这个生命周期函数
ngOnInit() {
var searchlist: any = this.storage.get(‘searchlist’);
// 如果searchlist存在的话，就赋值给historyList
if (searchlist) {
this.historyList = searchlist;
}
}

doSearch() {
if (this.historyList.indexOf(this.keyword) == -1) {
this.historyList.push(this.keyword);
// 通过set方法来指定this的指向
this.storage.set(‘searchlist’, this.historyList);
}
this.keyword = ‘’;
}

deleteHistroy(key) {
this.historyList.splice(key, 1);
// 通过set方法来指定this的指向
this.storage.set(‘searchlist’, this.historyList);
}
}

1.3.5 重新运行程序

先在控制台输入在当前项目目录输入 Ctrl+C 结束当前服务

然后控制台输入在当前项目目录输入:
ng serve --open

1.4 自己写的search 组件 服务 的代码

1 服务

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class StorageService {
  // StorageService 实际上是一个类 用的时候要 先实例化 再使用其中的方法
  constructor() { }
  set(key:any,value:any){
    localStorage.setItem(key,JSON.stringify(value))
  };
/* localStorage.setItem(key, JSON.stringify(value))：这个函数调用将一个值存储到浏览器的本地存储中。
localStorage：这是一个API，允许您在Web浏览器中保存键/值对。在localStorage中存储的数据即使在浏览器窗口关闭后也会持续存在。
.setItem(key, value)：这个方法用于将值存储到localStorage中。它接受两个参数：
key：一个字符串，用作存储数据的唯一标识符。
value：要存储的数据。由于localStorage只能存储字符串，因此如果您想存储对象或数组，您需要将它们转换为JSON字符串。
JSON.stringify(value)：这个函数将一个JavaScript对象或值转换为JSON字符串。由于localStorage只能存储字符串，如果您要存储的内容不是简单的字符串，这一步是必需的。 */
  
  get(key:any){
    // return   `this is a  service`;
    return JSON.parse(localStorage.getItem(key)||"nnull")
  }
  remove(key: any){
    localStorage.removeItem(key);
  }
}

2 ts文件

import { Component, OnInit } from '@angular/core';
import { StorageService } from 'src/app/services/storage.service';
/* 不推荐  
var mystorage = new StorageService();
console.log(mystorage.get());
 */
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
export class SearchComponent implements OnInit {
  public keyword: string = '';
  //定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  public historyList: any[] = [];
  //定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  public doSearch() {
    if (this.historyList.indexOf(this.keyword) == -1) {
      this.historyList.push(this.keyword);
    }
    console.log(this.keyword);
    this.keyword = '';
    //清空输入栏的功能
    //
    this.mystorage.set(`searchlist`, this.historyList);
  }
  public eachValueDelet(e: any) {
    console.log('删除前数组的长度:', this.historyList.length);
    console.log('删除数据的角标:', e);
    // 删除数据
    this.historyList.splice(e, 1);
    console.log('删除后数组的长度:', this.historyList.length);
    this.mystorage.set(`searchlist`, this.historyList);
  }
  // 使用服务 推荐
  constructor(public mystorage: StorageService) {
    //  let a = this.mystorage.get();
    //  console.log(a);
    //  alert(a);
  }
  ngOnInit(): void {
    console.log('页面刷新会触发这个生命周期函数');
    var newsearchlist = this.mystorage.get(`searchlist`);
    if(newsearchlist){
    this.historyList=newsearchlist;
      
    }
  }
}

3 html

<hr />
<div class="search">
  <h3>2 通过双向数据绑定 进行值获取</h3>
  <input type="text" [(ngModel)]="keyword" />
  <button (click)="doSearch()">搜索</button>
  <hr />
  <ul>
    <li *ngFor="let each of historyList  let mykey=index"  >{{ each }}----- <button (click)="eachValueDelet(mykey)">删除</button> </li>
  </ul>
</div>

---

07 Angular中的服务 以及自定义服务 以及完善toDoList（待办事项案例）(27分6秒)

Angular–实现ToDoList（事件清单）& 服务实现数据的持久化

1. Angular–实现ToDoList（事件清单）& 服务实现数据的持久化

1.1 ToDoList

ToDoList是一款非常优秀的 任务管理 软件，用户可以用它方便地组织和安排计划。
该 软件短小精悍，仅有一个 数百 KB 的 可执行文件就能完成所有功能，并且 界面设计优秀，
初级用户也能够快速上手。

具体功能：

ToDoList 帮你把要做的事情列出来，一项一项，类似 思维导图。
最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成， 提高效率。
当然了习惯是需要慢慢养成了，开始使用 ToDoList 这样的 软件会觉得很费劲，但坚持下来你就能体会到管理软件带来的便捷了。所以需要坚持。

1.2 Angular实现ToDoList（事件清单）

1.2.1 导入双向数据绑定的模块

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入模块
import { AppComponent } from './app.component';
import { SearchComponent } from './components/search/search.component';

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

1.2.2 绘制页面

todolist.component.html

<div class="todolist">
  <input
    class="formInput"
    type="text"
    [(ngModel)]="keyword"
    (keyup)="doAdd($event)"
  />
  <hr />
  <h3>待办事项：</h3>
  <ul>
    <li
      *ngFor="let each of todolist; let mykey = index"
      [hidden]="each.status == 1"
    >
      <!--  -->
      <input type="checkbox" [(ngModel)]="each.status" />{{ each.title }}--{{
        each.status
      }}-- <button (click)="eachValueDelet(mykey)">x</button>
      <!--  -->
    </li>
  </ul>
  <h3>已完成事项：</h3>
  <ul>
    <li
      *ngFor="let each of todolist; let mykey = index"
      [hidden]="each.status == 0"
    >
      <!--  -->
      <input type="checkbox" [(ngModel)]="each.status" />{{ each.title }}--{{
        each.status
      }}-- <button (click)="eachValueDelet(mykey)">x</button>
      <!--  -->
    </li>
  </ul>
</div>

1.2.3 美化页面

todolist.component.css

.todolist {
    width: 400px;
    margin: 20px auto;
  }
  .formInput {
    margin-bottom: 20px;
  
    width: 300px;
    height: 32px;
    border: 2px solid orchid;
    border-radius: 5px;
  }
  h2{
    text-align: center;
  }

1.2.4 声明数据和定义方法

todolist.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss'],
})
export class TodolistComponent {
  [x: string]: any;
  public keyword: string = '';
  //定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  public historyList: any[] = [];
  //定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  //--------------todolist
  public todolist: any[] = [
    {
      title: 123,
      status: 1,
    },
    {
      title: 456,
      status: 0,
    },
  ];
  doAdd(e: any) {
    if (e.keyCode == 13) {
      if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
        this.todolist.push({
          title: this.keyword,
          status: 0, //0表示代办事项  1表示已完成事项
        });
        this.keyword = '';
      } else {
        alert('数据已经存在');
        this.keyword = '';
      }
    }
  }
  eachValueDelet(e: any) {
    this.todolist.splice(e, 1);
  }
  //如果数组里面有是否含有重复数据返回true  否则返回false
  todolistHasKeyword(todolist: any, keyword: any) {
    // 如果keyword为空，则返回false
    if (!keyword) return false;
    for (var i = 0; i < todolist.length; i++) {
      if (todolist[i].title == keyword) {
        return true;
      }
    }
    return false;
  }
}

1.3 服务实现数据的持久化

刚刚的页面虽然看起来功能实现了，但是这时候如果我们刷新了页面那么所有的数据都会消失，如果我们想要数据在刷新后依旧存在。这时候我们就需要用到服务了。

如果你还不清楚什么是服务，那么请看 Angular服务

1.3.1 创建服务

命令行在当前项目目录输入:

ng g service my-new-service

创建到指定目录下面
ng g service services/storage

1.3.2 配置服务

app.moudule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SearchComponent } from './components/search/search.component';
import { TodolistComponent } from './components/todolist/todolist.component';

import { StorageService } from './services/storage.service'; // 引入服务
@NgModule({
  declarations: [AppComponent, SearchComponent, TodolistComponent],
  imports: [BrowserModule, FormsModule],
  providers: [StorageService], // 配置服务
  bootstrap: [AppComponent],
})
export class AppModule {}

1.3.3 在服务当中定义方法

storage.service.ts

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class StorageService {
  // StorageService 实际上是一个类 用的时候要 先实例化 再使用其中的方法
  constructor() { }
  set(key:any,value:any){
    localStorage.setItem(key,JSON.stringify(value))
  };
/* localStorage.setItem(key, JSON.stringify(value))：这个函数调用将一个值存储到浏览器的本地存储中。
localStorage：这是一个API，允许您在Web浏览器中保存键/值对。在localStorage中存储的数据即使在浏览器窗口关闭后也会持续存在。
.setItem(key, value)：这个方法用于将值存储到localStorage中。它接受两个参数：
key：一个字符串，用作存储数据的唯一标识符。
value：要存储的数据。由于localStorage只能存储字符串，因此如果您想存储对象或数组，您需要将它们转换为JSON字符串。
JSON.stringify(value)：这个函数将一个JavaScript对象或值转换为JSON字符串。由于localStorage只能存储字符串，如果您要存储的内容不是简单的字符串，这一步是必需的。 */
  
  get(key:any){
    // return   `this is a  service`;
    return JSON.parse(localStorage.getItem(key)||"nnull")
  }
  remove(key: any){
    localStorage.removeItem(key);
  }
}

1.3.4 在组件当中使用方法

用到this一定要注意this指向，尤其是在foreach和定时器里面，this指向的是window，如果要指向当前实例，一种方法是箭头函数，另外一种方法是set（）函数。

todolist.component.ts

import { Component, OnInit } from '@angular/core';
//引入服务
import { StorageService } from '../../services/storage.service';
@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css'],
})
export class TodolistComponent implements OnInit {
  public keyword: string;

  public todolist: any[] = [];

  constructor(public storage: StorageService) {}

  ngOnInit() {
    var todolist: any = this.storage.get('todolist');

    if (todolist) {
      this.todolist = todolist;
    }
  }

  doAdd(e) {
    if (e.keyCode == 13) {
      if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
        this.todolist.push({
          title: this.keyword,
          status: 0, //0表示代办事项  1表示已完成事项
        });

        this.keyword = '';

        this.storage.set('todolist', this.todolist); //用到this一定要注意this指向
      } else {
        alert('数据已经存在');
        this.keyword = '';
      }
    }
  }

  deleteData(key) {
    this.todolist.splice(key, 1);

    this.storage.set('todolist', this.todolist);
  }

  //如果数组里面有keyword返回true  否则返回false
  todolistHasKeyword(todolist: any, keyword: any) {
    //异步  会存在问题
    // todolist.forEach(value => {

    //   if(value.title==keyword){

    //       return true;
    //   }
    // });

    if (!keyword) return false;

    for (var i = 0; i < todolist.length; i++) {
      if (todolist[i].title == keyword) {
        return true;
      }
    }
    return false;
  }

  checkboxChage() {
    console.log('事件触发了');

    this.storage.set('todolist', this.todolist);
  }
}

todolist.component.ts我自己写的

import { Component, OnInit } from '@angular/core';
// import  +  providers: [StorageService],再在组件中 引入服务 ，constructor内 进行  服务的类的 实例化
import { StorageService } from 'src/app/services/storage.service';
@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss'],
})
export class TodolistComponent implements OnInit {
  [x: string]: any;
  public keyword: string = '';
  //定义一个数据，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  public historyList: any[] = [];
  //定义一个数组，并进行初始化 赋空值 ，防止ts进行非空判断后报错
  //--------------todolist
  public todolist: any[] = [
    {
      title: 123,
      status: 1,
    },
    {
      title: 456,
      status: 0,
    },
  ];
  doAdd(e: any) {
    if (e.keyCode == 13) {
      if (!this.todolistHasKeyword(this.todolist, this.keyword)) {
        this.todolist.push({
          title: this.keyword,
          status: 0, //0表示代办事项  1表示已完成事项
        });
        this.keyword = '';
        this.storage0.set(`todolist`, this.todolist);
        /* 将 todolist 数组保存到浏览器的 localStorage 中。这里是详细解释：
this.storage0: 这个表达式假设您已经在您的 Angular 组件中创建了一个名为 storage0 的 StorageService 实例。通常，这通过 Angular 的依赖注入系统完成。
.set('todolist', this.todolist): 这是在 StorageService 中定义的一个方法，用于将数据存储到 localStorage。set 方法接受两个参数：
第一个参数是键名 'todolist'，这是您在 localStorage 中保存数据时使用的标识符。
第二个参数 this.todolist 是要保存的数据，这里是您的待办事项数组。 */
      } else {
        alert('数据已经存在');
        this.keyword = '';
      }
    }
  }
  eachValueDelet(e: any) {
    this.todolist.splice(e, 1);
    console.log("事件触发了");
    this.storage0.set(`todolist`, this.todolist);
  }
  //如果数组里面有是否含有重复数据返回true  否则返回false
  todolistHasKeyword(todolist: any, keyword: any) {
    // 如果keyword为空，则返回false
    if (!keyword) return false;
    for (var i = 0; i < todolist.length; i++) {
      if (todolist[i].title == keyword) {
        return true;
      }
    }
    return false;
  }
  // 使用公共的类 服务 进行实例化
  constructor(public storage0: StorageService) {
    // let s = this.storage0.get();
    // console.log(s);
    // alert("todolist:"+s);
  }
  ngOnInit(): void {
    console.log('todolost 页面刷新会触发这个生命周期函数');
    var todolist = this.storage0.get(`todolist`);
    if (todolist) {
      this.todolist = todolist;
    }
  }
  checkboxChange(){
    console.log("事件触发了");
    this.storage0.set(`todolist`, this.todolist);
  }
}

todolist.component.html

<h2>todoList</h2>
<div class="todolist">
    <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
    <hr>
    <h3>待办事项</h3>
    <ul>
        <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
            <input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChage()" /> {{item.title}} ------
            <button (click)="deleteData(key)">X</button>
        </li>
    </ul>

    <h3>已完成事项</h3>

    <ul>
        <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
            <input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChage()" /> {{item.title}} ------
            <button (click)="deleteData(key)">X</button>
        </li>
    </ul>

</div>

todolist.component.html我自己写的

<h2>todolist</h2>
<div class="todolist">
  <input
    class="formInput"
    type="text"
    [(ngModel)]="keyword"
    (keyup)="doAdd($event)"
  />
  <hr />
  <h3>待办事项：</h3>
  <ul>
    <li
      *ngFor="let each of todolist; let mykey = index"
      [hidden]="each.status == 1"
    >
      <!--  -->
      <input type="checkbox" [(ngModel)]="each.status"  (change)="checkboxChange()" />{{ each.title }}--{{
        each.status
      }}-- <button (click)="eachValueDelet(mykey)" (change)="checkboxChange()">x</button>
      <!--  -->
    </li>
  </ul>
  <h3>已完成事项：</h3>
  <ul>
    <li
      *ngFor="let each of todolist; let mykey = index"
      [hidden]="each.status == 0"
    >
      <!--  -->
      <input type="checkbox" [(ngModel)]="each.status" />{{ each.title }}--{{
        each.status
      }}-- <button (click)="eachValueDelet(mykey)">x</button>
      <!--  -->
    </li>
  </ul>
</div>