画像を削除した後に角度成分が更新されない

Question

画像を削除した後にコンポーネントを更新する方法を見つけようとしています。ページをリフレッシュしても機能し、もう表示されませんが、即座に更新したいと思っています。私は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> 

Answer 1

だから私は、オブジェクト全体をフェッチすることによって、問題（ではないのベストプラクティス）を解きますClickの返答で私が真に設定したブール値を返し、サービスが呼び出されたときに私は自分のコンポーネントで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; 
     }); 
    } 
} 

ありがとうございます！