代码之家 › 专栏 › 技术社区 › Angulandy2

角度2搜索(添加项,删除项,选择所有要数组的项)依赖性

ionic-framework typescript angular javascript

Angulandy2 · 技术社区 · 6 年前

我想有一个正常的依赖性,让添加/删除项目到数组项目点击,选择所有-然后删除点击你不想要的。

ngFor中的项目列表:

按钮(选择所有项目)。(如果选择全部,按钮(项)将只删除该按钮。

按钮(项)-第一次单击“添加”,第二次单击“删除”。

有人知道这些功能的相似依赖性吗?

我的示例(如果我选择全部并单击它,则只有delete item class css不起作用):

 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
  }

1 回复 | 直到 6 年前

Suryan 6 年前

在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)
  }