[Angular2+]checkbox全选/反选/不选择的时候禁用旁边的按钮

效果图

/其实禁用还有cursor:not-allow的，截不了图

html

/有省略一些DIV，因为太多了...

<div class="title"><span class="title-text">用户</span><span class="title-sub">共{{userList.length}}人</span></div><div class="btn "><span [class.btn-allow]="btnUserAllow">停用</span></div><div class="btn"><span [class.btn-allow]="btnUserAllow">删除</span></div><div class="btn"><span [class.btn-allow]="btnUserAllow">编辑</span></div></div><div class="users-header"><div class="block-1"><label class="control control--checkbox"><input type="checkbox" (click)="selectAlluser($event)" [checked]="isSelectedAlluser()"><div class="control__indicator"></div></label></div><div class="block-2">uid</div><div class="block-2">username</div><div class="block-2">groupname</div><div class="block-2">status</div><div class="block-2">Actions</div></div><div id="users-panel" class="scroll"><div *ngFor="let user of userList" class="user-info"><div class="block-1"><label class="control control--checkbox"><input type="checkbox" [checked]="isCheckUser(user.uid)"(click)="clickUser($event,user.uid)"><div class="control__indicator"></div></label></div><div class="block-2 info">{{user.uid}}</div><div class="block-2 info">{{user.username}}</div><div class="block-2 info">{{user.groupname}}</div><div class="block-2"><span class="status" [class.status_available]="user.status==='available'"[class.status_Disabled]="user.status==='Disabled'">{{user.status}}</span></div>

ts

import { Component, OnInit, OnChanges } from '@angular/core';@Component({selector: 'app-permission',templateUrl: './ponent.html',styleUrls: ['./ponent.scss']})export class PermissionComponent implements OnInit {constructor() { }// 用户组已选selectedUser = [];selectedUserCount = 0;// 用户btn状态btnUserAllow = false;userList = [{uid: '000',username: 'yiki',groupname: 't',status: 'available',}, {uid: '001',username: 'yiki',groupname: 't',status: 'available',}];/*** 点击用户全选*/selectAlluser(e) {const checkbox = e.target;const action = (checkbox.checked ? 'add' : 'remove');if (action === 'add') {this.selectedUserCount = this.userList.length;} else {this.selectedUserCount = 0;}this.userList.forEach((elt) => {const entity = elt.uid;this.updateSelected(action, entity, this.selectedUser);});this.isUserBtnAllow();}isUserBtnAllow() {if (this.selectedUserCount !== 0) {this.btnUserAllow = true;} else {this.btnUserAllow = false;}}isSelectedAlluser() {return this.userList.length === this.selectedUserCount;}isCheckUser(item) {return this.selectedUser.findIndex(value => value === item) >= 0;}clickUser(e, item) {const checkbox = e.target;const action = (checkbox.checked ? 'add' : 'remove');if (action === 'add') {this.selectedUserCount++;} else {this.selectedUserCount--;}console.log(this.selectedUser, this.selectedUserCount);this.updateSelected(action, item, this.selectedUser);this.isUserBtnAllow();}/*** @param action 行为* @param item item* @param selectedList 辨别是用于users还是groups*/private updateSelected(action, item, selectedList) {if (action === 'add' && selectedList.findIndex(value => value === item) === -1) {console.log('执行添加');selectedList.push(item);}if (action === 'remove' && selectedList.findIndex(value => value === item) !== -1) {console.log('执行删除');selectedList.splice(selectedList.findIndex(value => value === item), 1);}console.log(this.selectedUser);}}