angular7 checkbox的全选，反选，单选，多选

首先设置变量

export class UserComponent implements OnInit {
  // 全选状态
  checkSum : boolean;
  // 数据check的状态数组
  userStatus: boolean[] = [];
  // 数据集合数组
  status: any[] = [];
  }

用status变量获取数组集合数据

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../../common/service/http.service';

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

    // 全选状态
  checkSum : boolean;
  // 数据check的状态数组
  userStatus: boolean[] = [];
  // 数据集合数组
  status: any[] = [];
  // 用于渲染数据
  userdata: any;
  constructor(
    private http: HttpService,
  ) { }

  ngOnInit() {
    this.userInfo();
  }

  userInfo(pageSize, pageNo) {
    // 用get方法获取数据 看写的是什么方法了，post也行
    // 主要是获取数据，获取数据就不做讲解了
    this.http.getData()
      .subscribe((response: any) => {
      if (response.code === 200 || response.ok) {
      	// 获取数据
        this.userdata = response;
        // 获取Json里的数组数据
        this.status = response.data;
      } else {
        alert(response.message);
        return false;
      }
      });
  }

全选事件

 checkAll() {
    // 全选框的状态
    this.checkSum = this.checkSum ? false : true;
    // 如果全选框状态为true
    if (this.checkSum) {
      // 根据页面现实的数据长度，把全部数据的check状态赋值为true
      for (let i = 0; i < this.status.length; i++) {
        // 给数据的复选框赋值true
        this.userStatus[i] = true;
      }
      // 如果全选框状态不是true
    } else {
      // 根据页面当前的数据长度，把全部数据的checke状态赋值为false
      for (let i = 0; i < this.status.length; i++) {
        // 给数据的复选框赋值true
        this.userStatus[i] = false;
      }
    }

  }

单选事件

checked(i) {
    // 根据当前i的顺序，判断check的状态
    this.userStatus[i] = this.userStatus[i] ? false : true;
    // 设定自加变量值，并初始化
    let k = 0;
    // 循环查看数据长度查看状态
    for (let j = 0; j < this.status.length; j++) {
      // 查看所有状态是否都等于true
      if (this.userStatus[j] === true) {
        // 数据状态等于true，则自加变量k加1
        k++;
        if (k === this.status.length) {
          // 返回全选状态为true
          return this.checkSum = true;
        }
      }
    }
  }

反选事件

  checkAllNo() {
    // 循环查看userStatus是否由false的状态
    for (let i = 0; i < this.status.length; i++ ) {
      // 如果userStatus有false的状态
      if (this.userStatus[i] === false) {
        // 更改全选框的状态
        this.checkSum = false;
      }
    }
  }

html界面
用angular7里的[(chencked)] 来获取状态false还是true

<div>
	<div>
		<input type="checkbox" [(checked)]="checkSum" (click)="checkAll()">
	</div>
    <div>
     编号
    </div>
</div>
<div *ngFor="let item of userdata.data;let i = index">
	<div>
	   <input type="checkbox" [(checked)]="userStatus[i]" (click)="checked(i);checkAllNo()">
	</div>
	<div>
	    {{item.account}}
	</div>
</div>

ts里的完整代码

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../../common/service/http.service';

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

   // 全选状态
  checkSum : boolean;
  // 数据check的状态数组
  userStatus: boolean[] = [];
  // 数据集合数组
  status: any[] = [];
  // 用于渲染数据
  userdata: any;
  constructor(
    private http: HttpService,
  ) { }

  ngOnInit() {
    this.userInfo();
  }

  userInfo(pageSize, pageNo) {
    // 用get方法获取数据 看写的是什么方法了，post也行
    // 主要是获取数据，获取数据就不做讲解了
    this.http.getData()
      .subscribe((response: any) => {
      if (response.code === 200 || response.ok) {
      	// 获取数据
        this.userdata = response;
        // 获取Json里的数组数据
        this.status = response.data;
      } else {
        alert(response.message);
        return false;
      }
      });
  }
/**
   * check全选事件
   */
  checkAll() {
    // 全选框的状态
    this.checkSum = this.checkSum ? false : true;
    // 如果全选框状态为true
    if (this.checkSum) {
      // 根据页面现实的数据长度，把全部数据的check状态赋值为true
      for (let i = 0; i < this.status.length; i++) {
        // 给数据的复选框赋值true
        this.userStatus[i] = true;
      }
      // 如果全选框状态不是true
    } else {
      // 根据页面当前的数据长度，把全部数据的checke状态赋值为false
      for (let i = 0; i < this.status.length; i++) {
        // 给数据的复选框赋值true
        this.userStatus[i] = false;
      }
    }

  }

  /**
   * check单选事件
   * @param i 当前位置
   */
  checked(i) {
    // 根据当前i的顺序，判断check的状态
    this.userStatus[i] = this.userStatus[i] ? false : true;
    // 设定自加变量值，并初始化
    let k = 0;
    // 循环查看数据长度查看状态
    for (let j = 0; j < this.status.length; j++) {
      // 查看所有状态是否都等于true
      if (this.userStatus[j] === true) {
        // 数据状态等于true，则自加变量k加1
        k++;
        // k+1是为了等于数组长度
        if ((k + 1) === this.status.length) {
          // 返回全选状态为true
          return this.checkSum = true;
        }
      }
    }
  }

  /**
   * 全选后，随意点掉一个复选框，全选框则被点掉
   */
  checkAllNo() {
    // 循环查看userStatus是否由false的状态
    for (let i = 0; i < this.status.length; i++ ) {
      // 如果userStatus有false的状态
      if (this.userStatus[i] === false) {
        // 更改全选框的状态
        this.checkSum = false;
      }
    }
  }

  /**
   * 删除选取的N个id
   */
  idsDelete() {
    let num = 0; // 为了存储ID，赋予ids数据位置
    const ids = []; // 选择事件后，给ids至空
    // 循环查看userStatus的状态
    for (let i = 0; i < this.status.length; i++) {
      // 如果userStatus[i]的状态为true
      if (this.userStatus[i] === true) {
        // 则给ids赋值，赋值顺序根据num
        ids[num] = this.status[i].id;
        // 每次赋值，num + 1
        num++;
      }
    }
// 一下为访问接口什么的，没必要看了
    const data = {
      'ids': ids.toString()
    };
    const userIdsDelete = confirm('确认屏蔽以上' + num + '个会员？');
    if (userIdsDelete) {
      this.http.getData(data)
        .subscribe((response: any) => {
          if (response.code === 200 || response.ok) {
            this.ngOnInit();
          } else {
            alert(response.message);
            return false;
          }
        });
    } else {
      return false;
    }
  }
}

以上就是我写的，有问题或者不明白的的可以评论留言。
工作不忙的时候，回认真回复的。
不好请勿骂，谢谢。
转载的时候，请说明出处。