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

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) {
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 doc 的官方评论：

NOTE: v2 changes the behavior of [dragulaModel]. It no longer mutates the arrays you give it, but will shallow clone them and give you the results. Use two-way binding with [(dragulaModel)]="...", or use the DragulaService dropModel and removeModel events to save the new models produced.

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

ng2-dragula reorder list not able to get

ng2-dragula

angular