刪除圖像後，角度組件不會更新

我一直在想方設法在刪除圖像後更新組件。如果我刷新它的工作頁面，並且不再可見，但我希望它立即更新。我一直在嘗試不同的方法，如使用ChangeDetectorRef等，但沒有運氣。任何指導非常感謝。刪除圖像後，角度組件不會更新

我的服務看起來是這樣的：

removeImage(id) { 
    const headers = new Headers({ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }); 
    const options = new RequestOptions({ headers: headers, withCredentials: true }); // Create a request option 
    const url = this._config.apiEndpoint + 'images/' + id + '/preview'; 

    return this.http 
    .delete(url, options) 
    .map(response => { 
     if (response.status === 200) { 
      return response.ok; 
     } else if (response.status === 400) { 
      return response.text; 
     } 
    }) 
    .catch(this.exceptionService.catchBadResponse) 
    .finally(() => { }); 
}

和我的組件看起來像這樣：

@Component({ 
    selector: 'app-card', 
    templateUrl: 'card.component.html', 
    styleUrls: ['card.component.less'] 
}) 

export class CardComponent { 
    @Input() card; 

removeImage(id) { 
     this.cardService.removeImage(id) 
     .toPromise() 
     .then(res => { 
      return res; // returns true 
     }); 
}

HTML如下：

<div uk-dropdown="pos: top-right; delay-hide: 0; mode: click"> 
    <ul class="uk-nav uk-dropdown-nav"> 
     <li><a class="uk-dropdown-close textred" (click)="removeImage(card.Id)">Remove image</a></li> 
    </ul> 
</div>

我有獲取一個指令圖像，如下所示：

@Directive({ 
    selector: '[card-image]', 
    host: { 
    '[src]': 'imageData' 
    } 
}) 
export class ImageSrcDirective implements OnInit { 


@Input('card-image') id: number; 
configUrl = CONFIG.appConfig.apiEndpoint + 'images/'; 
defaultImage = CONFIG.images.card; 
url: string; 
imageData: any = ''; 
options: RequestOptions; 

constructor(private http: Http, private sanitizer: DomSanitizer) { 
    const headers = new Headers({ 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }); 
    this.options = new RequestOptions({ headers: headers, withCredentials: true }); 
} 

ngOnInit() { 
    if(this.id){ 
     this.url = this.configUrl + this.id + "/preview"; 
     this.http.get(this.url, this.options) 
      .map(image => image.json()) 
      .subscribe((data) => { 
       const imageurl = data.ImageData.length > 0 ? data.ImageData : this.defaultImage; 
       this.setImage(imageurl); 
      }, (err) => { 
       console.log("err fetching image: ", err); 
       console.log("dta: "); 
      }); 

    }else{ 
     this.setImage(this.defaultImage); 
    } 
} 

setImage(imageurl){ 
    this.imageData = this.sanitizer.bypassSecurityTrustUrl(imageurl); 
}

}

這個指令在這裏使用在同一組件的HTML：

<div *ngIf="card.IsMine" class=""> 
    <a [routerLink]="['', space.Id]" routerLinkActive="active"> 
    <div *ngIf="!space.IsUploadingImage" class="uk-card-media-top uk-overflow-hidden"> 
     <img [space-image]="space.Id" class="uk-animation-kenburns" alt=""> 
    </div> 
    </a> 

<div class="uk-card-body"> 
    <div class="boundary-align"> 
     <span class="more-btn" uk-icon="icon: more-vertical"></span> 
     <div uk-dropdown="pos: top-right; delay-hide: 0; mode: click"> 
      <ul class="uk-nav uk-dropdown-nav"> 
       <li><a class="uk-dropdown-close textred" (click)="removePreviewImage(space.Id)">Remove preview image</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

來源

2017-08-31 muchos_nachos

有沒有機會向我們展示如何使用圖像組件（html和組件）？ – Nick

您的組件模板（我的意思是在刪除它之前）中的圖像是否被刪除？如果是的話，我不明白你爲什麼要爲此提供服務。 – Mozgor

需要您如何顯示圖像的代碼，即圖像是從服務器檢索的還是靜態的。 –

所以，我解決了這個問題（不是最好的做法），以獲取整個對象點擊代替響應給我一個布爾值，我設置爲true，當服務被調用時，我在我的組件中設置爲false，如下所示：

@Component({ 
    selector: 'app-card', 
    templateUrl: 'card.component.html', 
    styleUrls: ['card.component.less'] 
}) 

export class CardComponent { 
    @Input() card; 
     removeImage(imageObj) { 
     imageObj.hasImage = true; 
     this.cardService.removeImage(card.Id) 
     .toPromise() 
     .then(res => { 
      imageObj.hasImage = false; 
     }); 
    } 
}

感謝您的時間！

來源

2017-08-31 14:21:49

刪除圖像後，角度組件不會更新

回答

相關問題