ngFor firing before ngOnInit Http Request finished

Question

I have a parent component with a list of objects and the child component is the detailed view of whatever object is selected from that list. I am putting the objects uuid into a url param and then doing an Http Get request with that uuid when the child is loaded. However, I am using ngFor to loop through some images in the object and it looks like ngFor is trying to loop through the media array before the Http request is complete.

My error:

TypeError: Cannot read property 'media' of undefined

The images load fine but the error seems to be causing issues when a new parent object is selected. The old images stay on the child component with the new. I can't find a solution that lets ngFor start looping once the GET request from NgOnInit is done.

Any help would be greatly appreciated.

Child.ts looks like:

  ngOnInit() {
this.route.params
.subscribe(
  (params: Params) => {
    this.uuid = params['id'];
    this.appService.fetchCardByUuid(this.uuid).subscribe(
      data => {
        this.selectedCard = data;
        console.log(this.selectedCard);
      }
    );
  }
);
}

Child.html:

  <div class="row">
<div class="col-xs-12">
  <div *ngFor="let selectedCardImg of selectedCard.media">
    <img *ngIf="selectedCardImg.type != 'vid'" src="{{selectedCardImg.raw}}">
  </div>
</div>