角度2 ng-spin-kit

Question

Angular 2プロジェクトでng-spin-kitを使用しています。私はこのコードを持っている部品で

：

loading: boolean; 

setTimeout(() => { this.loading = true }, 
    1000 
); 

と私は、この持っているHTMLで：だから

<sk-fading-circle class="loader" [hidden]="loading"></sk-fading-circle> 

を、私はスピナーの実行をしたが、それだけで1000ミリ秒のために実行されます。

APIの内容が読み込まれるまで、スピナーを実行する必要があります。

setTimeout()がこれを行う最善の方法であるかどうかわかりません。

どうすればいいですか？

UPDATE

これが可能で、いくつかのオプションがありますが、サービス

export class AppService { 

    endPoint = AppConstants; 
    handler = AppHandler; 

    constructor(private http: Http) {} 

    getCandidates() { 
    const headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    headers.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 

    return this.http.get(this.endPoint.API_ENDPOINT_GET_CANDIDATES, { 
     headers: headers 
    }) 
     .toPromise() 
     .then((res: Response) => { 
     const data = res.json(); 
     const allCandidate = []; 

     data.result.forEach((entry) => { 
      const candidate = new Candidate(); 

      candidate.college = entry.college; 
      candidate.cultural_fit = entry.cultural_fit; 
      candidate.email = entry.email; 
      candidate.graduation = entry.graduation; 
      candidate.logic_test = entry.logic_test; 
      candidate.mobile_phone = entry.mobile_phone; 
      candidate.name = entry.name; 

      allCandidate.push(candidate); 
     }); 
     return allCandidate; 
     }) 
     .catch(this.handler.handleError); 
    } 

} 

Answer 1

これは私がそれを

loading: boolean = false; 
getCandidates() { 
    // ... 

    this.loading = true; 

    return this.http.get(this.endPoint.API_ENDPOINT_GET_CANDIDATES, { 
    headers: headers 
    }).map(res => res.json()) 
    .catch(this.handler.handleError) 
    .finally(() => this.loading = false) 
    .subscribe(res => { 
    // ... 
    }); 
} 

Answer 2

あり、主なものは以下のとおりです。

1. は（あなたのAPIからデータを取得し、観察を使用既に角度のHTTPの一部である ）を受信し、データ/エラーがretした後にローディングを に設定しますrieved
2. 終了時に実行されるコールバック関数を渡します。

Answer 3

まず、あなたはそのように* ngIfを使用する必要があります。

<sk-fading-circle class="loader" *ngIf="loading"></sk-fading-circle> 

コンポーネントの使用において

loading: boolean = true; 

あなたのAPIが観測を使用している場合、あなたのコードは、そのようになります。

this.api.subscribe(data => .... 
... 
() => {this.loading = false}); 

を

データが読み込まれるとすぐに、スピナーが削除されます。