[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: './permission.component.html',
  styleUrls: ['./permission.component.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);
  }


}