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.
