Issue loading data into view

help
1

In my Meteor Angular2 app, I have an overview component that loads a list of campers from another component into view.

overview.component.html:

<div>
     <camper-list></camper-list>
</div>

The camper-list.component subscribes to a list of campers filtered by guardian.

ngOnInit() {
        this.campers = Campers.find({guardian:Meteor.userId()}).zone();
        this.campersSub = MeteorObservable.subscribe('campers').subscribe();
      
        this.autorunSub = MeteorObservable.autorun().subscribe(() => {
            this.camperCount = Counts.get('numberofCampers');
        });
}

If none are found (camper.count == 0) I display a message to add campers. If campers found (camper.count > 0) then I display the list of campers.

<div *ngIf="camperCount > 0">
    <div class="panel-body">
      <div class="list-group" *ngFor="let camper of campers | async">
              {{ camper.firstName }}&nbsp;
              <span class="text-center small"><em>{{ camper.dob | date:'y'}}</em></span>
      </div>
    </div>
  </div>
</div>
<div *ngIf="camperCount == 0">
   <em><i class="fa fa-comment fa-fw"></i> Please add campers to begin registration</em>
</div>

This issue I’m facing is that the campers aren’t shown until I refresh the browser. Any ideas why and how to address this.