Angular 2搜索（添加项目，删除项目，选择所有项目到阵列）依赖性

我希望有一个正常的依赖性，允许在项目点击时添加/删除项目到数组，选择所有 - 然后删除你不想要的点击 .

例如 ：

ngFor中的项目列表：

按钮（选择所有项目） . （如果全部选中，按钮（项目）将仅删除该按钮 .

按钮（项目） - 第一次单击添加，第二次删除 .

按钮（项目） - 第一次单击添加，第二次删除 .

按钮（项目） - 第一次单击添加，第二次删除 .

按钮（项目） - 第一次单击添加，第二次删除 .

添加的项目应具有“活动”类 .

Anyone know similar dependancies of these functionalities ?

我的例子（如果我选择all并单击它，则只删除项类css不起作用）：

TS :

myDist: Districts[] = [];
  buttActive = false;
   clicked = false;
  disableBtn = false;
 minus = false;
 allClicked = false;

 constructor(public navCtrl: NavController, public navParams: NavParams,
              public dataService: DistricSearchProvider,
              public events: Events) {

}


clickedB(i, item){
    item.clicked = !item.clicked;
    console.log(item.clicked)
  this.ifAll(i,item)
}

clickedAll(){
    this.allClicked = !this.allClicked;
}

//if item clicked first time
  changeActive(item, i){
    if(item.clicked === true && this.allClicked == false) {
      item.buttActive = !item.buttActive;
      this.addDistrict(item)
      console.log('Pridedam')
    }

    //if Item clicked second time
 else if(item.clicked === false && this.allClicked == false  ) {
      item.buttActive = !item.buttActive;
      this.deleteDistrict(item);
    }

  }
ifAll(i,item){
  if (this.allClicked == true) {
    console.log('If all worked')
    const i = this.myDist.indexOf(item.name);
    this.myDist.splice(i, 1);
    console.log(this.myDist)
    item.buttActive = !item.buttActive;
    item.allClicked = !item.allClicked;
    console.log('Mygtukas :', item.buttActive, item.allClicked)
  }
}
//add or delete district from the new array
  addDistrict(item){
    console.log('Item:', item)
this.disable = 'disabled';
   this.myDist.push(item.name)
    console.log('Pridėta',this.myDist)
  }

  deleteDistrict(item) {
   const index = this.myDist.indexOf(item.name)
    if (index !== -1) {
     console.log('Indexas :',index);
      this.myDist.splice(index, 1);
    }
    console.log('Deleted', this.myDist)
  }

 chooseAll(){
    if(this.allClicked == true) {
      this.myDist = this.dataService.items;
      this.disableBtn = !this.disableBtn;
      console.log(this.myDist)
    }

    else {
      this.myDist = new Array;
      this.disableBtn = !this.disableBtn;
    }

  }
}

HTML :

<button (click)="clickedAll();chooseAll()" ion-button class="choose-all">Choose all</button>

   <button [ngClass]="{'activeBtn': item.buttActive, 'activeBtnAll': allClicked, 'deleteArrayItem': minus }"
            (click)="clickedB(i, item);changeActive(item,i);"
            *ngFor="let item of items; let i = index"
            ion-button class="tag-btn">{{item.name}}
    </button>

CSS :

.activeBtn {
  background-color: #0045a4 !important;
  color:#fff !important;
}

  .activeBtnAll {
    background-color: #0045a4 !important;
    color:#fff !important;
  }

  .deleteArrayItem {
    background:red !important; //this doesnt really work
  }