angular - Komponent laddas inte vid ändring av variabel i *ngIf


När variabeln loading ändras till false, slutar app-loadingspinner att visas vilket är förväntat. Men enligt min förståelse borde samtidigt app-paginator börja visas vilket inte händer. Jag misstänker att min förståelse är felaktig. Om så är fallet, hur kan vi uppnå det förväntade beteendet?

deals.component.html

<app-loadingspinner *ngIf="loading"></app-loadingspinner>
<div fxLayout="row" fxFlex.md="70" fxLayoutWrap class="card-deck-container mat-elevation-z4">
    <div fxFlex *ngFor="let deal of deals" class="card-item">
      <app-deals-card [ngStyle]="{'width':'300' + 'px'}" [deal]="deal"></app-deals-card>
    </div>
    <app-paginator *ngIf="!loading"></app-paginator>
</div>

deals.component.ts

export class Deals implements OnInit {
  public deals : Deal[] = []; 
  private next : string;
  private previous : string;
  loading = true;
  constructor(private dataService: DataService) { 
    this.dataService.get_deals().subscribe((res : any[])=>{
      this.deals = res['results'];
      this.next = res['next'];
      this.previous = res['previous'];
      if (res instanceof HttpResponse){
          this.loading = false;
      }
    });
  }

  ngOnInit() {
  }

}

Svar #1

det första jag skulle undersöka är vad this.dataService.get_deals() returnerar? Det borde returnera ett observable, men vilken typ av observable? Kommer det alltid vara ett HttpResponse? (verkar inte så)

Ett annat förslag jag har är om du använder ngIf-direktivet. Om målet är att kontrollera ett booleanvärde och sedan visa en av två komponenter, kanske försök att använda Angular DOM Marker.

<app-testing *ngIf = "loading; else showAppTester"></app-testing> 

<ng-template #showAppTester> 
<app-tester > </app-tester>
</ng-template>

loading är ett booleskt värde jag definierade i TypeScript som kan ändras.