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

Biehmltym2024-01-10 23:13

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

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

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

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

news.component.ts

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 服务
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);
  }
}
2 ts文件
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
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

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

html

todolist

 复制代码 
todolist><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

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

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

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

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
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我自己写的
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
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我自己写的
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>
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10Mac cursor设置jdk、Maven版本