我有一个用Dragula进行排序的数据库中的值表。表格行可以拖放,一切似乎都按设计工作。问题是我将自定义管道应用于每行中的三个单元格值,以将其数据库值更改为人类可读的值(即:“ N”为“ Normal”,“ O”为“ Off-line”,等等)。当我应用管道时,表格会正确加载并显示;管道按预期工作。但是,当我拖放时,在放置事件中,表会中断,并且应用了管道的值将变为空白。
当我删除管道时,该表将按预期运行,但是这些值当然不是人类可读的。
带有dragula指令的HTML:
<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>
我的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是否可以使用Angular管道?
可以将Dragagon与Angular Pipes一起使用。需要注意的部分是,Angular Pipe正在读取Dragula对象返回的数据,该数据随每个drop读取并转换,因此drop事件发生时数据的状态就是导致我特定错误的原因。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句