如何动态地基于Muuri看板创建看板小部件

Question

我使用Muuri插件来实现我的Angluar Web应用程序的小部件。

我在网上找到了一些示例，它可以很好地运行。

此Muuri看板代码的链接如下：

https://github.com/mriess260/angular-muuri-kanban-demo

但是我现在有一个问题：例如，如果我单击一个按钮，我想动态创建Widget。

看板小部件初始化。

 ngOnInit() {
    this.columnGrids = new Array<any>();
    this.boardGrid = new Muuri('.board', {
      dragEnabled: true,
      dragStartPredicate: {
        handle: '.board-column-header'
      },
      dragReleaseDuration: 400,
      dragReleaseEasing: 'ease'
    });
  }

HTML如下：

<div class="board">
  <div class="board-column todo">
    <div class="board-column-header">To do</div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          1
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          2
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          3
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          4
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          5
        </div>
      </div>
    </div>
  </div>
  <div class="board-column working">
    <div class="board-column-header">
      Working
    </div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          6
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          7
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          8
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>9</div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>10</div>
      </div>
    </div>
  </div>
  <div class="board-column done">
    <div class="board-column-header">Done</div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          11
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          12
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          13
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          14
        </div>
      </div>
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          15
        </div>
      </div>
    </div>
  </div>
</div>
<button (click)="createNewItem()">create new item</button>

有一个按钮可以创建新的看板

createNewItem() {
    this.boardGrid.add(this.generateItem());

  }

  generateItem() {
    // tslint:disable-next-line:max-line-length
    const itemTemplate = '<div class="board-column"><div class="board-column-header">To do</div><div class="board-column-content"><div class="board-item"><div class="board-item-content"></div></div></div></div>';
    return itemTemplate;

  }

我不知道如何正确执行此操作。

任何人的建议。

最好的问候

狮子座