ng2-dragula重新排序列表无法获得

Question

我使用ng2-dragula软件包进行拖放功能，但是一旦重新排序列表项，就无法获得更新的数组列表值。这是我所做的代码。

      <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) {
console.log(this.contactArray)
}

}

当我试图在重新排序列表后安慰contactArray时。我还是会收到默认的订单。

Default order looks like this

A
B
C
D

Once I reorder looks like

D
C
A
B

然后尝试console.log(this.contactArray)，我仍然得到默认的订单值。期待新的重新排序值。

有什么专家的建议吗？

Answer 1

您需要使用双向绑定，如：[(dragulaModel)]="contactArray"。以下是ng2-dragula 文档的官方评论：

注意: v2改变了dragulaModel的行为。它不再变异你给它的数组，而是浅浅地克隆它们并给出结果。使用(DragulaModel)=“.”的双向绑定，或者使用DragulaService dropModel和removeModel事件来保存生成的新模型。