Kendo Angular UI - 有什么方法可以保持tilelayout的状态并最初加载它？

Question

我正在尝试实现一个仪表板，用户可以在其中添加/删除和重新排序小部件。

加载持久状态应该不是问题，因为我可以创建这样的东西：

<kendo-tilelayout-item *ngFor="let widget of widgets"
                   [title]="widget.title"
                   [col]="widget.col"
                   [order]="widget.order">...</kendo-tilelayout-item>

但是我怎样才能将tilelayout的状态保存到我的模型中呢？

我尝试了重新排序事件，但我没有任何信息来识别我的小部件模型。

public onReorder(e: TileLayoutReorderEvent): void {
   // Find the model to persist changes
}

Answer 1

我就是这样做的。在

<kendo-tilelayout-item
    [attr.data-setting]="dataItem.id"

在我的组件中，我保留一个名为“设置”的对象，就像典型的 JS 字典一样使用：

settings: any = {};

当我从 API 调用中获取数据时，我将每个结果作为 ID 属性放回到对象中：

// loop results when loading...    
this.settings[dataItem.id] = dataItem;

然后我就可以处理重新订购事件了：

onReorder(e: TileLayoutReorderEvent) {
  const data: ItemUpdate[] = [];
  e.items.forEach((item) => {
    const r = item.elem as ElementRef;
    const key = r.nativeElement.getAttribute('data-setting');

    data.push({
      id: this.settings[key].id,
      col: item.col,
      row: item.row,
      colSpan: item.colSpan,
      rowSpan: item.rowSpan,
      order: item.order,
    });
  });

  // sort the data      
  // call the API to update
}