Ng2 Dragula 重新排序相同的數組多個放置區域

Question

我從高處到低處都搜索過了，結果都干了。 Angular 版本 9.1.11，ng2-dragula 版本 2.1.1。 我想將同一個數組綁定到多個放置區，並且在放置時應該正確地重新排序數組。 這與 Dragula 1.3.1 版完美配合，但不適用於 2.1.1 版。 這是我的代碼：

<div class="row">
        <div class="{{colWidth()}}" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
            <div *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index" class="container-fluid">
                <p-playlist-item *ngIf="i < 10"
                                [contentItem]="contentItem"
                                [index]="i">        
                </p-playlist-item>
            </div>
        </div>

        <div *ngIf="playlistService.playlist.contentItems.length > 10" class="{{colWidth()}}" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
            <div *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index" class="container-fluid">
                <p-playlist-item *ngIf="i > 9 && i < 20"
                                [contentItem]="contentItem"
                                [index]="i">        
                </p-playlist-item>
            </div>
        </div>
</div>

在dragulaService.dropModel('playlist-items') 回調中，當拖入另一列時，項目會從sourceModel 中移除並插入到targetModel 中。 我嘗試將它從目標 model 中拼接出來，但視圖仍然沒有正確排序。 我也嘗試過使用單向綁定語法 [dragula]="playlistService.playlist.contentItems"。 同樣，完全相同的功能適用於 Dragula 版本 1.3.1，所以我只是對最新版本不走運嗎？ 任何幫助將非常感激！

Answer 1

當然，在我提出問題后，我就想出了一個解決方案。 我只是使用列數 css 屬性，並根據播放列表的長度動態更新 class，同時只綁定一次數組。

<div class="{{columnCount()}}" dragula="playlist-items" [(dragulaModel)]="playlistService.playlist.contentItems">
    <p-playlist-item *ngFor="let contentItem of playlistService.playlist.contentItems; let i = index"
                    [contentItem]="contentItem"
                    [index]="i">        
    </p-playlist-item>
</div>