Question

我具有拖放功能，可以编译图像数组。为了显示已添加到数组中的内容，我将它们存储在localstorage中并设置为名为selectedGallery的变量，然后在显示中对其进行迭代，但是当我放入新图像时不会更新。被推送到本地存储，但是使用可观察的主题，更改似乎发生在应用程序选项卡中，但未在视图上更新。

.html

<label>Gallery Images</label>
<div class="gallery">
    <ng-container *ngFor="let image of selectedGallery">
      <img class="placeholder" [src]="imageUrl + image.url" alt="selected image thumbnail">
    </ng-container>
</div>

因此，在这里我要从selectedGallery迭代图像，当我手动刷新页面时，图像数组将更新。我在下面的ngOnInit上运行了一个快速console.log：

.component.ts

this.watchStorage().subscribe(
  (data: any) => {
        this.selectedGallery = data;
        console.log(this.selectedGallery);//returns undefined :/
  }
)

这仅记录未定义。

这里有更多上下文：

.component.ts

private storageSubject = new Subject<string>();

watchStorage(): Observable<any>{
  return this.storageSubject.asObservable();
}

this.configService.uploadImage(imageUpload)
    .subscribe(
      response => {
        if (response) {
          imageFile = response.data;
          if (localStorage) {
          var selectedImages;
          if (!localStorage['selectedImages']) selectedImages = [];
          else selectedImages = JSON.parse(localStorage['selectedImages']);
          if (!(selectedImages instanceof Array)) selectedImages = [];
          selectedImages.push(imageFile);
          localStorage.setItem('selectedImages', JSON.stringify(selectedImages));
          this.storageSubject.next('image');
         }
      }});

ngOnInit() {
  this.watchStorage().subscribe(
    (data: any) => {
      this.selectedGallery = data.result;
      console.log(this.selectedGallery);//this logs undefined :/
    }
  )
}

就这样，不会更新视图中的selectedGallery，我不确定为什么。

以前有人遇到过这个问题吗？

现在挠头...

Answer 1

似乎您正在发出字符串this.storageSubject.next('image');。数据值很可能是字符串“图像”，并且没有字段结果。

为什么不发出selectedImages？

使用Angular将对象添加到LocalStorage阵列后，显示未更新

1 个答案: