Блог

У меня есть компонент загрузки, я загружаю два изображения, но второе изображение является первым, в объекте имена двух изображений отличаются, здесь это не ошибка, и когда я загружаю первое изображение, второе меняется на первое, но если я загружаю второе изображение, изображение в компоненте не отображается.не обновляется.

update.component.html

  <div class="form-group row">
            <div class="" *ngIf="!imgURL; else noimage">
                <img class="img-list" src="{{ url   'avatar/'   'no-image.png'  }}" alt="">
            </div>
            <ng-template #noimage>
                <img class="img-list" src="{{ url   'avatar/'   imgURL }}" alt="">
            </ng-template>
            <label class="col-2 col-form-label">Imagen1</label>
            <angular-file-uploader [config]="afuConfig" (ApiResponse)="upload1($event)">
            </angular-file-uploader>
        </div>
        <div class="form-group row">
            <div class="" *ngIf="!imgURL2; else noimage">
                <img class="img-list" src="{{ url   'avatar/'   'no-image.png'  }}" alt="">
            </div>
            <ng-template #noimage2>
                <img class="img-list" src="{{ url   ' avatar2/ '   imgURL2 }}" alt=" ">
            </ng-template>
            <label class="col-2 col-form-label ">Imagen2</label>
            <angular-file-uploader [config]="afuConfig2 " (ApiResponse)="upload2($event) ">
            </angular-file-uploader>
        </div>
 

update.component.ts

 upload1(data)
    {
      

      this.activatedRoute.params.subscribe( params =>
        {
          console.log(params);
          console.log(params.id);
          let id = params['id'];
          this.room._id = id;
          console.log(this.room._id);
          this.room.image1 =  data.body.image1;
          console.log(this.room.image1);
          this.roomservice.saveImg(this.room._id,this.room.image1).subscribe(
            response =>
              {
                //this.room.image1;
                this.getRoom();    
                
              },
              error =>
              {
                console.log(error);
              }
      
          );
  
        }); 
    }
    upload2(data)
    {
      

      this.activatedRoute.params.subscribe( params =>
        {
        
          let id = params['id'];
          
          this.room._id = id;
          this.room.image2 =  data.body.image2;
          console.log(this.room.image2);
          this.roomservice.saveImg2(this.room._id,this.room.image2).subscribe(
            response =>
              {
                //this.room.image1;
                this.getRoom();    
                
              },
              error =>
              {
                console.log(error);
              }
      
          );
  
        }); 
    }
 

Я не получаю никаких ошибок в консоли, я думаю, что серверная часть работает, изображение загружается, и объект получает другое имя в каждом свойстве изображения. Я не знаю, ошибка ли это в угловом html.

  <div class="" *ngIf="!imgURL2; else noimage">
 

не уверен, является ли это источником ошибки или просто опечаткой, но я думаю, вы хотели написать

  <div class="" *ngIf="!imgURL2; else noimage2">
 

в противном случае, если у вас нет изображения, оба они будут ссылаться на одно и то же