Angular，DragnDrop 问题，本地存储答案

【问题标题】：Angular, DragnDrop Issue, localstorageAngular，DragnDrop 问题，本地存储
【发布时间】：2020-12-19 20:18:41
【问题描述】：

特征：特征[] = [];

使用这段代码，我可以让这个数组项拖放并保存在存储中

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.features , event.previousIndex, event.currentIndex);
  window.localStorage.setItem('features', JSON.stringify(this.features));
}

有了这个，我订阅数据，一切正常... 在这种情况下一切正常，即使我添加了新项目

  ngOnInit() {
  this.isLoading = true;
  this.featuresService.getFeatures();
  this.featuresSub = this.featuresService.getFeatureUpdateListener()
  .subscribe((featureData: {features: Feature[]}) => {
   this.features = featureData.features
   this.isLoading = false;

但如果我将此行替换为 this.features =featuresData.features 我只会看到保存的本地存储数据

   let retrievedData = localStorage.getItem("features") || '{}';
   let newFeaturesArr = JSON.parse(retrievedData);
   this.features = newFeaturesArr

  })
  .....

是否知道如何混合这两种逻辑，如果我刷新页面看到 localstorage 排序的项目，+ 如果我添加新项目立即在最后显示它

【问题讨论】：

标签： angular rxjs drag-and-drop local-storage observable

【解决方案1】：

我认为您的问题可能比明确的要多，但根据您所说，您可以将 localStorage 数据和 newFeatures 创建为对象并将它们合并：


this.features = Object.assign(retrievedData, newFeatures);

或将两者都创建为数组并将它们合并：


this.features = retrievedData.concat(newFeatures)

【讨论】：