ng2 Dragula и угловые трубы - PullRequest
Новая
       29

ng2 Dragula и угловые трубы

0 голосов
/ 17 апреля 2019

У меня есть таблица значений из базы данных, которую я смог отсортировать с помощью Dragula.Строки таблицы можно перетаскивать, и все, кажется, работает как задумано.Проблема в том, что у меня есть собственный канал, примененный к трем значениям ячеек в каждой строке, чтобы изменить его значение в базе данных на удобочитаемое значение (то есть: «N» на «Нормальный» и «O» на «Автономный»,так далее).Когда я применяю трубы, таблица загружается и отображается правильно;трубы работают как положено.Однако, когда я перетаскиваю, при событии перетаскивания разрывается таблица, и значения с примененными к ним трубами становятся пустыми.

Когда я удаляю каналы, таблица функционирует, как и ожидалось, но значения, конечно,не читается человеком.

Мой HTML с директивой dragula: 

    <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>

Мой компонент ts показывает, как я создаю экземпляр dragula и анализирую данные, которые он мне возвращает. 

    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()
    );

Можно ли использовать угловые трубы с Dragula?

1 Ответ

0 голосов
/ 17 апреля 2019

Можно использовать угловые трубы с Dragula.Следует отметить, что угловая труба считывает данные, возвращаемые объектом Dragula, которые считываются и преобразуются при каждом отбрасывании, поэтому состояние данных во время события отбрасывания было причиной моей конкретной ошибки.

...