首页 > 解决方案 > DragulaModel 不使用动态数据

问题描述

当我的数据通过 AJAX 获取时,我正在使用 ng2-dragula 和 mi 组件 var 在拖放后不会更新。

这是我的html代码:

    <div class='wrapper'>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
    <div *ngFor='let text of many' [innerHtml]='text'></div>
  </div>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
    <div *ngFor='let text of many2' [innerHtml]='text'></div>
  </div>
</div>

这是我的component.ts:

public many: Array<string> = ['The', 'possibilities', 'are', 'endless!'];
  public many2: Array<string> = ['Explore', 'them'];

  constructor(private dragulaService: DragulaService) {
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value) => {
      this.onRemoveModel(value.slice(1));
    });
  }

  private onDropModel(args) {
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) {
    let [el, source] = args;
    // do something else
  }

在此示例中,DragulaModel 正在工作,因为数据是静态数组。但是当我用 ajax 填充这个数组时,dragulaModel 不起作用。例如,我正在使用一种执行 ajax 的方法,然后在我的 many 或 many2 var 中订阅数据。

非常感谢!

标签: angularissue-trackingng2-dragula

解决方案


问题是 init 的值仍然在 ajax 值到达之前[dragulaModel]绑定到其值。您可以添加到包装器中以确保在 dragula init 之前具有值。manyundefined*ngIf="many"many


推荐阅读