重新加载页面后保持元素位置 - 拖放 cdk Angular 7答案

【问题标题】：Keep element position after reload page - drag and drop cdk Angular 7重新加载页面后保持元素位置 - 拖放 cdk Angular 7
【发布时间】：2020-01-31 18:19:31
【问题描述】：

我正在使用 Angular 7 中的 cdk Drag & Drop，但现在我被卡住了。当我重新加载页面时，所有组织的项目都会回到原来的位置。如何保存位置并将它们检索到元素？

目前，这就是我所拥有的：

派的父级

<div class="pie-content">
  <div class="individual-pie"  *ngFor="let pie of serials">
    <app-pie [serialnumber]="pie"></app-pie>
  </div>
</div>

Pie.html

<div
  cdkDragBoundary=".content"
  cdkDrag
  (cdkDragEnded)="dragEnd($event)"
  class="pie"
  [chart]="pie"
></div>

Pie.ts

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

【问题讨论】：

将定位保存在本地存储中。
但是怎么做呢？我阅读了有关 cdk 的所有文档，无法获取元素的位置（与页面相关）。以及如何检索位置？
使用 trackBy angular.io/api/common/NgForOf#change-propagation

标签： angular drag-and-drop angular-cdk

【解决方案1】：

您可以将列表保存到本地存储。这是您在页面上使用它的方式：

[chart]="pie"

在你的控制器中： @输入饼图：字符串[];

所以每次拖放时，保存列表：

dragEnd(event: CdkDragEnd) {
  console.log(event);
  let myStorage = window.localStorage;
  myStorage.setItem("pie", pie);
}

并在刷新时从本地存储中获取列表：

ngOnInit() {
    let myStorage = window.localStorage;
    this.pie= myStorage.getItem("pie"));
  }

【讨论】：

我得到：无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。 ("
你不见了： import { DragDropModule } from '@angular/cdk/drag-drop';在 app.module.ts 中，无论如何，填充你的馅饼的项目是从哪里来的？
我编辑了我的问题，我有一个带有 *ngFor 的父级，它调用组件“app-pie”。已经导入 DragDropModule
但是我的“pie”变量必须是图表类型。我正在使用 Highcharts
我不知道它是如何工作的，但你也可以保存对象