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

Question

我希望有一个正常的依赖关系，它允许在单击项目时将项目添加/删除到数组中，全选 - 然后在单击时删除你不想要的。

例如：

ngFor 中的项目列表：

按钮（选择所有项目）。 （如果全选，button(Item) 将只删除该按钮。

button(item) - 第一次点击添加，第二次删除。

button(item) - 第一次点击添加，第二次删除。

button(item) - 第一次点击添加，第二次删除。

button(item) - 第一次点击添加，第二次删除。

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

有人知道这些功能的类似依赖关系吗？

我的例子（如果我全选并点击它，只有删除项目类 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
  }

Answer 1

在您的 deleteDistrict 函数中，您只删除一个项目，如果单击 selectAll，您希望删除所有项目

你可以这样做：

  deleteDistrict(item) {
    const index = this.myDist.indexOf(item.name);
   if(this.allClicked) {
     this.myDist.splice(this.myDist.length);
   }

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