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

Question

我正在使用Angular 7中的cdk拖放功能，但是现在我被卡住了。当我重新加载页面时，所有组织的项目都会恢复到原始位置。如何保存位置并将其检索到元素？

现在，这就是我所拥有的：

派的父母

<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);
}

Answer 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"));
  }