1.需求分析

1.1勾选“全选”=》全选，再次勾选=》“全不选”。
1.2勾选行可点击按钮删除，未勾选行禁用删除按钮。
1.3批量删除

image.png

2.代码逻辑

2.1全选

2.1.1一个boolean变量checkAll决定是否全选。
2.1.2当所有行都被勾选时(item.status均为true)时触发全选=》使checkAll为true
2.1.3每次勾选都触发对checkAll的判断
注意：根据checkAll改变lists.item.status的selectAll方法要绑定change事件，而不是click。因为change事件发生在value改变之后（此时checkAll已经根据点击发生了改变），而click事件发生在value改变之前（此时虽然点击了，但是checkAll还未发生改变）。

<table>
      <thead>
      <tr>
        <th>清单名称</th>
        <th>状态</th>
        <th>全选<input type="checkbox" [disabled]="lists.length===0" [(ngModel)]="checkAll" (change)="selectAll()"></th>
        <th>删除</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let list of lists,let index=index">
        <td>{{list.name}}</td>
        <td>{{list.statues|statepipe}}</td>
        <td><input type="checkbox" [(ngModel)]="list.statues" (change)="select()" ></td>
        <td><button type="button" [disabled]="!list.statues" (click)="delete(index)">删除</button></td>
      </tr>
      </tbody>
    </table>

 selectAll(){//全选、全不选
      this.lists.forEach( (item,index,arr) =>{
        item.statues=this.checkAll;
      })
  };
  select()
  {
    this.checkAll=this.lists.every(item=>item.statues)
  };

2.2批量删除

2.2.1勾选的行全部删除。lists.splice(index,1);的方法不能使用，因为批量删除传递过来的index是在未删除任何数据的情况下的index。当使用lists.splice(index,1);时会改变数组的长度，此时应当删除的元素的位置与传递过来的index不匹配。放弃这种方法
2.2.2利用filter,批量删除满足条件（被勾选）的数据，就是说不满足条件（未被勾选）的数据被保留

deleteBatches(){
    this.lists=this.lists.filter(item=>!item.statues);
  }

3.完整代码

<div>
  <!-- 头部 -->
  <div >
    <h1 >我的购物清单列表{{input}}</h1>
    <span>清单总数
       <span >{{lists.length}}</span>
     </span>
  </div>
  <!-- 内容 -->
  <div >
    <div >
      <input  type="text" [(ngModel)]="input"/>
      <span >
         <button (click)="add()">添加</button><button (click)="deleteBatches()">批量删除</button>
       </span>
    </div>
    <table>
      <thead>
      <tr>
        <th>清单名称</th>
        <th>状态</th>
        <th>全选<input type="checkbox" [disabled]="lists.length===0" [(ngModel)]="checkAll" (change)="selectAll()"></th>
        <th>删除</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let list of lists,let index=index">
        <td>{{list.name}}</td>
        <td>{{list.statues|statepipe}}</td>
        <td><input type="checkbox" [(ngModel)]="list.statues" (change)="select()" ></td>
        <td><button type="button" [disabled]="!list.statues" (click)="delete(index)">删除</button></td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

import { Component } from '@angular/core';
interface Type {
  name:string;
  statues:boolean;
}
let arr:Type[]=[
  {name:"电脑",statues:false},
  {name:"手机",statues:false},
  {name:"充电器",statues:false},
  {name:"耳机",statues:false}
  ]
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles:[
    `
    h1{
      color:red;
    }
    `
  ]
})

export class AppComponent {
  title = 'angular';
  lists:Type[]=arr;
  input:string="";
  checkAll:boolean=false;
  add(){
    this.lists.push({name:this.input,statues:false});
  };
  delete(index){
    this.lists.splice(index,1);
  };
  selectAll(){//全选、全不选
      this.lists.forEach( (item,index,arr) =>{
        item.statues=this.checkAll;
      })
  };
  select()
  {
    this.checkAll=this.lists.every(item=>item.statues)
  };
  deleteBatches(){
    this.lists=this.lists.filter(item=>!item.statues);
  }
}

import { Pipe, PipeTransform } from '@angular/core';
 //自定义管道的步骤：
//使用 @Pipe装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
//实现 PipeTransform 接口中定义的 transform 方法
@Pipe({
  name: 'statepipe'    //名称
})
export class StatePipe implements PipeTransform {
 
  transform(value: boolean): string {
    switch (value) {
      case true:
        return '已采购';
      case false:
        return '未采购';
      default :
        return '未采购';
    }
  }
}