ng2 dragula在重新排序后设置新的索引值答案

【问题标题】：ng2 dragula set new index value after reorderng2 dragula在重新排序后设置新的索引值
【发布时间】：2019-01-23 14:01:20
【问题描述】：

我正在使用 ng2-dragula 包进行拖放功能，但是一旦重新排序列表项，就无法获取更新的数组索引。这是我正在尝试的代码。

HTML

      <ul [dragula]='"bag-items"' ([dragulaModel])="contactArray">
                  <li *ngFor="let field of contactArray" >
                    <label>{{field.role}}</label>
                 </li>
      </ul>

import { DragulaService   } from "ng2-dragula";

@Component({
  selector: 'app-edit-project',
  templateUrl: './edit-project.component.html',
  styleUrls: ['./edit-project.component.css'],
  providers: [    
      DragulaService
  ]
})

export class ProjectComponent implements OnInit {

constructor(private dragula:DragulaService) {
    for(let i =0; i<=this.contactArray.length; i++) {
        console.log(this.contactArray[i].index)
   }
}

}

当我在重新排序列表后尝试控制 this.contactArray[i].index 时。无法正常工作。

Default order looks like this


A
B
C
D  

{ Value :   A, index: 1 } 
{ Value :   B, index: 2 } 
{ Value :   C, index: 3 } 
{ Value :   D, index: 4 }

一旦我重新排序，需要像下面这样更新新索引以进行 API 更新，

D
B
C
A 

{ Value :   D, index: 1 } 
{ Value :   B, index: 2 } 
{ Value :   C, index: 3 } 
{ Value :   A, index: 4 }

this.http.post(API_URL+'product/update', BodywithcontactArray);

请任何专家建议。

【问题讨论】：

我认为 ng2-Dragula 只是改变了对象在数组中的位置。使用 Dragula，您无法更改对象值，如果您想这样做，您必须手动更改每个索引。
@SnehaPawar 这不是真的。 ng2-Dragula 更改数组中的顺序，但您有很多 Drake 动作，因此您可以在将元素从一个位置移动到另一个位置后更改值。一些德雷克动作为您提供获取元素 id 的选项，另一种为您提供对整个数组的引用，您应该在其中找到对象，但通常您有很多选项来操作数组中的数据。

标签： angular ng2-dragula

【解决方案1】：

可以得到对象各自的值

this.dragula.drop.subscribe(value => {
      // here you have to do swap index manually
console.log(value[0]);

console.log(value[1]);

console.log(value[2]);

console.log(value[3]);
});

【讨论】：