Question

为什么图像在更新时没有改变。我正在显示图像集。图像数据存储在数组中。更新时，所有数据都会改变，但是图像是旧的预览图像。我检查了路径，它也是更新后的网址。我不明白为什么它没有改变。如果我将数组数据复制到const变量，然后将该数组赋值为null，然后再将数组赋给const变量。刷新页面后，仅显示更新的图像。

我将图像数据存储在数据库中。我只想显示5张图像。如果没有上载5张图像，那么我将虚拟值存储到数组中以用于其余索引。

这是我用于加载图像的打字稿代码。

getAllAdds() {
    this.storedAds = JSON.parse(localStorage.getItem('ads'));
    this.advertisementsList = this.storedAds;
    const len = this.advertisementsList.length === 5 ? 5 : (5 - this.advertisementsList.length);

    for (let i = (5 - len); i < 5; i++) {
      const img = {
        link: '',
        modifiedBy: '',
        side: '',
        id: '',
        photoUrl: this.baseUrl + 'Upload/Photos/defaultAdd.jpg',
        dateAdded: '',
        dateModified: '',
        isActive: false,
        fileExtension: 'jpg',
        position: i + 1
      };
      this.advertisementsList.push(img);
    }

这是我的用于显示图像列表的html代码

 <div class="col-md-3" *ngFor="let photo of advertisementsList; let i = index">

          <div class="card mb-2">
            <div class="card-body">
              <h5 class="card-title text-center"> {{photo.position}}</h5>
              <div class="add-img">
                <img src="{{photo.photoUrl}}" class="img-thumbnail p-1" alt="">
              </div>
              <div class="text-center mt-1">
                <button type="button" class="btn btn-sm mr-1" (click)="openModal(template,i)">Change</button>
                <button type="button" class="btn btn-sm btn-danger">
                  <i class="fa fa-trash-o"></i>
                </button>
              </div>

            </div>

          </div>
        </div>

单击“更改”按钮时，将打开模型弹出窗口，并允许用户上传图像。从该方法中，我将获取要存储的数组索引并将其分配给变量。

openModal(template: TemplateRef<any>, index) {
    if (this.advertisementsList && this.advertisementsList.length > 0) {
      this.uploadingImageIndex = index;
      const len = this.advertisementsList.length;
      if (this.advertisementsList[index].id !== '') {
        this.positionId = this.advertisementsList[index].id;
      } else {
        this.positionId = '0';
      }
    } else {
      this.positionId = '0';
    }

    this.modalRef = this.modalService.show(template);
  }

上传图像后，然后在我的服务器方法中返回上传的图像详细信息，然后获取该响应数据并将其保存在数组中。在这种情况下，我也将该数组存储在localStorage中。

this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        const res: GetAdvertisement = JSON.parse(response);
        this.alertify.success('Photos uploaded successfully');
        this.modalRef.hide();

        const index = this.uploadingImageIndex;
        const photo = {
          id: res.id,
          link: res.link,
          modifiedBy: res.modifiedBy,
          side: res.side,
          photoUrl: this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension,
          dateAdded: res.dateAdded,
          dateModified: res.dateModified,
          isActive: res.isActive,
          fileExtension: res.fileExtension,
          position: index + 1
        };


        this.advertisementsList.splice(this.uploadingImageIndex, 1);
        this.advertisementsList.push(photo);

        if (index < this.storedAds.length) {
          // stored app should update
          this.storedAds[index] = photo;
        } else {
          // add new record to storedads
          this.storedAds.push(photo);
        }
        localStorage.setItem('ads', JSON.stringify(this.storedAds));


        const plist = this.advertisementsList;
        this.advertisementsList = null;
        this._compiler.clearCache();
        this.advertisementsList = plist;
        this.router.onSameUrlNavigation = 'reload';


        this.authService.advertisementsList = this.advertisementsList;
        localStorage.setItem('ads', JSON.stringify(this.advertisementsList));


        // window.location.reload();
        console.log(this.advertisementsList);
      }
    };
  }

我想知道的是，动态更改图像后，如何在预览中显示最新图像？现在正在显示我的旧图像。但是它的数组索引数据已经更新。更新图像时，我从服务器中删除了旧图像。

请帮助我谢谢

Answer 1

可能是由于缓存问题，请像这样this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension + "?" + Math.floor(Math.random() * 100) + 1

更改代码

所以看起来像这样

photoUrl: this.baseUrl + 'Upload/Photos/' + res.photoUrl + '.' + res.fileExtension + "?" + Math.floor(Math.random() * 100) + 1

随机号码可以根据您的要求。

在Angle 7中更新时图像不会动态更改

1 个答案: