Question

我希望有一个正常的依赖关系，它允许在单击项目时添加/删除要排列的项目，选择全部-然后在不需要的情况下单击删除。

例如：

ngFor中的项目列表：

按钮（选择所有项目）。（如果全部选中，则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)
  }

Angular 2搜索（添加项，删除项，选择所有要排列的项）相关性

1 个答案: