I have successfully implemented Dragula to make a table of values from a database sortable. Everything functions as intended, with the ability to drag and drop table rows. However, I encounter an issue when I apply a custom pipe to three of the cell values in each row to convert them from database values to human-readable ones (such as changing 'N' to 'Normal' and 'O' to 'Offline'). The table loads and displays correctly with the pipes applied, but upon dragging and dropping, the table breaks and the piped values become blank.
If I remove the pipes, the table behaves normally, although the values are not easily readable for humans.
Here is a snippet of my HTML code with the dragula directive:
<tbody class='wrapper' dragula='RIDRAG' id="left">
<tr class='container' *ngFor="let ri of this.riRow; let i = index">
<td><img src="./assets/images/Hamburger_icon.svg.png" style="width: 15px; padding-left: 5px;"></td>
<td>{{i + 1}}</td>
<td>{{ri.ri}}</td>
<td>{{ri.classification}}</td>
<td>{{ri.type}}</td>
<td>{{ri.shd}}</td>
<td>
<app-edit-ri-row [noGroupFlag]="this.noGroupFlag || disabledCheck()" (editEmit)="receiveEditEmit($event)" [riRow]="ri"></app-edit-ri-row>
<button style="width:50%;" type="submit" name="delete" [disabled]="this.noGroupFlag || disabledCheck() === true"
class="btn btn-danger rounded-0" (click)="removeRiRow(i)">
<fa-icon [icon]="['fas', 'trash-alt']" size="med"></fa-icon>
</button>
</td>
</tr>
</tbody>
This snippet shows how I create a Dragula instance and parse the data it returns:
this.dragula.createGroup('RIDRAG', {
removeOnSpill: false,
revertOnSpill: true
});
this.subs.add(this.dragula.drop('RIDRAG')
.pipe(map(data => {
// Data parsing logic
}))
.subscribe()
);
My main question is: Can Angular pipes be used effectively with Dragula?