angular - DragulaModel 不适用于动态数据

Question

当我的数据通过 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 中订阅数据。

非常感谢!

Answer 1

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