ng2 Dragula and Angular pipes

I have a table of values from a database that I've made sortable with Dragula. The table rows can be dragged and dropped and everything seems to work as designed. The problem is that I have a custom pipe applied to three of the cell values in each row to change it's database value to a human readable value (ie: 'N' to 'Normal' & 'O' to 'Off-line', etc). When I apply the pipes, the table loads and displays correctly; the pipes work as expected. However, when I drag and drop, on the drop event the table breaks and the values with pipes applied to them become blank.

When I remove the pipes, the table functions as expected, but the values are of course not human readable.

My HTML with the dragula directive in place:

    <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>&nbsp;
          </button>
        </td>
      </tr>
    </tbody>

My ts component showing how I create dragula instance and parse the data that it returns to me.

    this.dragula.createGroup('RIDRAG', {
      removeOnSpill: false,
      revertOnSpill: true
    });
    this.subs.add(this.dragula.drop('RIDRAG')
      .pipe(map(data => {
        this.varX = [];
        this._STRINGARRAY = [];
        this._XARRAY = [];
        this._CHILDREN = data.source.children;
        this._xARRAY = Object.values(this._CHILDREN);
        for (let item in this._RIARRAY) {
          this._STRINGARRAY.push(this._RIARRAY[item].innerText);
        }
        let index: number = 0;
        for (let item in this._STRINGARRAY) {
          let tempString = this._STRINGARRAY[item].trim();
          this._XARRAY.push(tempString.split('\t'));
        }
        for (let item = 0; item < this._XARRAY.length; item++) {
          let _SINGLETON: object;
          if (this._XARRAY[item][1]) {
            this._VAR2 = this._XARRAY[item][1];
            this._VAR3 = this._XARRAY[item][2];
            this._VAR4 = this._XARRAY[item][3];
            this._VAR5 = this._XARRAY[item][4];
            _SINGLETON = {
              var1: index + 1,
              var2: this._VAR2,
              var3: this._VAR3,
              var4: this._VAR4,
              var5: this._VAR5
            };
            index++;
            this.bar.push(_SINGLETON);
          }
        }
        this.foo.emit(this.riRow);
      }))
      .subscribe()
    );

Is it possible to use Angular pipes with Dragula?

It is possible to use Angular Pipes with Dragula. The part to note is that the Angular Pipe is reading the data returned by the Dragula object, which is read and transformed with each drop, so the state of the data at the time of the drop event was what was causing my specific error.