Question

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

HTML

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

JS

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）;

请提供任何专家意见。

Answer 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]);
});

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

1 个答案: