向下移动数组切换中的连续项

Question

我正在实施一个选择列表组件，我有以下布局

当我移动连续的项目时，它会在这两个项目之间切换

我的代码如下，

moveDown(){
    let tempItem =[]
    this.selectedItems.forEach((item,index)=>{
      if(item.selected && index!== (this.selectedItems.length-1)){
       tempItem.push(item);
       this.selectedItems[index]=this.selectedItems[index+1];
       item.selected=false
       this.selectedItems[index+1]=item
      }
    });
    tempItem.forEach((item)=>{
      console.log(item)
      this.selectedItems.find(item1=>item1.id===item.id).selected=true;
    });
  }

完整代码可在以下 plunker

中找到

Answer 1

那是因为你在迭代时修改了列表，为了避免这种情况，一个简单的修改是在列表上向后循环（有点类似于想法或在迭代时从列表中删除项目）在它上面。）

试试这段代码：

moveDown() {
    let tempItem = []
    for (let index = this.selectedItems.length - 1; index >= 0; index--) {
        let item = this.selectedItems[index];
        if (item.selected && index !== (this.selectedItems.length - 1)) {
            tempItem.push(item);
            this.selectedItems[index] = this.selectedItems[index + 1];
            item.selected = false
            this.selectedItems[index + 1] = item
        }
    }
    tempItem.forEach((item) => {
        console.log(item)
        this.selectedItems.find(item1 => item1.id === item.id).selected = true;
    });
}