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

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

我正在数据库中存储图像数据。我只想显示5个图像。如果没有上传5个图像，那么我将虚拟值存储到rest索引的数组中

这是我用于加载图像的typescript代码

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

getAllAdds（）{
this.storedAds=JSON.parse（localStorage.getItem（'ads'）；
this.advisementslist=this.storedAds；
const len=this.advisementslist.length==5？5:（5-this.advisementslist.length）；
for（设i=（5-len）；i<5；i++）{
常数img={
链接：“”，
修改为：“”，
一方：“，
id:“”，
photoUrl:this.baseUrl+'Upload/Photos/defaultAdd.jpg'，
已添加日期：“”，
已修改日期：“”，
I：错，
文件扩展名：“jpg”，
职位：i+1
};
本.广告列表.推送（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>

{{photo.position}
改变

当点击“更改”按钮时，它会打开模型弹出窗口，让用户上传一个图像。通过该方法，我得到要存储的数组索引，并将其分配给一个变量

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

OpenModel（模板：TemplateRef，索引）{
if（this.advertisementsList&&this.advertisementsList.length>0）{
this.uploadingImageIndex=索引；
const len=this.advisementslist.length；
if（this.advertisementsList[index].id！=''）{
this.positionId=this.advertisementsList[index].id；
}否则{
this.positionId='0'；
}
}否则{
this.positionId='0'；
}
this.modalRef=this.modalService.show（模板）；
}

上传图像后，在我的服务器方法中，我返回上传的图像详细信息，然后获取响应数据并将其保存在数组中。在这种情况下，我也将此数组存储在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);
      }
    };
  }

this.uploader.onSuccessItem=（项目、响应、状态、标题）=>{
如果（答复）{
const res:getadvision=JSON.parse（响应）；
this.alertify.success（‘照片上传成功’）；
this.modalRef.hide（）；
const index=this.uploadingImageIndex；
常数照片={
id:res.id，
链接：res.link，
modifiedBy:res.modifiedBy，
方：res.side，
photoUrl:this.baseUrl+'Upload/Photos/'+res.photoUrl+'.+res.fileExtension，
dateAdded:res.dateAdded，
dateModified:res.dateModified，
isActive：res.isActive，
fileExtension:res.fileExtension，
职位：索引+1
};
this.advertisementsList.splice（this.uploadingImageIndex，1）；
此.广告列表.推送（照片）；
if（索引

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

请帮帮我

---

谢谢

这可能是由于缓存问题，更改代码如下，

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

---

随机数可以根据您的要求而定。

可能是由于缓存问题，请像这样更改代码，

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

---

随机数可以根据您的要求而定。

不确定，但请检查：这可能是由于缓存问题，请按如下方式更改代码，

this.baseUrl+'Upload/Photos/'+res.photoUrl+'.+res.fileExtension+“？”+Math.floor（Math.Random（）*100）+1

Me也有同样的问题，并在末尾生成了一些随机数作为查询字符串，它可以正常工作。。我只能在那个时候找到这个修复程序，它对我来说很好。@Prashant，我试过那个方法，但不起作用。多谢你的帮助reply@Hello世界，我试过你的方法。然后它工作正常。非常感谢。昨天我问了你的问题，但我昨天没有试过，：D再次感谢你不确定，但检查一下：这可能是由于缓存问题，更改你的代码如下，

this.baseUrl+'Upload/Photos/'+res.photoUrl+'.+res.fileExtension+“？”+Math.floor（Math.random（）*100）+1

Me也有同样的问题，并在末尾生成了一些随机数作为查询字符串，它可以正常工作。。我只能在那个时候找到这个补丁，它对我来说很好。@Prashant，我试过那个方法，但是