ローテーションスピナーの表示と非表示をオンにする

Question

最後の日はAngularJSからAngularに移動しようとしていました。私はすでにWebアプリケーションを持っており、私は運動のためにそれを書き直したい。私が古いもので持っていた機能の1つは、HTTPリクエスト中のローディングスピナーでした。私はGoogleとオンラインのチュートリアルを検索し、どのようにAngularでそれを行うことができるかを見て、私はサービスを選んだ。ここでは、コードされています。私ができるので、それだけで黒い四角瞬間

spinner.service.ts

import { Injectable } from '@angular/core'; 
import { Observable, Subject } from 'rxjs/Rx'; 

export interface ISpinnerState { 
    show: boolean 
} 

@Injectable() 
export class SpinnerService { 
    private _spinnerSubject = new Subject(); 

    spinnerState = <Observable<ISpinnerState>>this._spinnerSubject; 

    show() { 
    this._spinnerSubject.next(<ISpinnerState>{ show: true }); 
    } 

    hide() { 
    this._spinnerSubject.next(<ISpinnerState>{ show: false }); 
    } 
} 

spinner.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core'; 
import { Subscription } from 'rxjs/Rx'; 

import { ISpinnerState, SpinnerService } from './spinner.service'; 

@Component({ 
    selector: 'loading-spinner', 
    template: ` 
    <div 
     class="spinner"> 
    </div> 
    `, 
    styles: [`.spinner {position: absolute;left: 46%;top: 12%;background-color:black;width:50px;height:50px}`] 
}) 

export class SpinnerComponent implements OnDestroy, OnInit { 
    visible = false; 

    private _spinnerStateChanged: Subscription; 

    constructor(private _spinnerService: SpinnerService) { } 

    ngOnInit() { 
    this._spinnerStateChanged = this._spinnerService.spinnerState 
     .subscribe((state: ISpinnerState) => this.visible = state.show); 
    } 

    ngOnDestroy() { 
    this._spinnerStateChanged.unsubscribe(); 
    } 
} 

です試して。その後、適切なローディングアイコンを追加します。ここでは、HTTPリクエスト中に呼び出す別のサービスを示します。問題はスピナーが常に表示されていることである

apartment.service.ts

....other stuff 

@Injectable() 
export class ApartmentService { 

    constructor(
    private _http: Http, 
    private _spinnerService: SpinnerService 
) { } 

getApartments() { 
    this._spinnerService.show(); 
    return this._http.get(API + 'apartments') 
     .map((response: Response) => <Apartment[]>response.json().apartments) 
     //.catch(this._exceptionService.catchBadResponse) 
     .finally(() => this._spinnerService.hide()); 
    } 

} 

。ロードプロセスだけでなく、私が間違って行ったことは私には分かりません。何か案が？

Answer 1

は、私はあなたがvisible状態に応じて表示/非表示するために結合不足していると思う：私は思う

<div *ngIf="visible" 
    class="spinner"> 
</div>