Loadingスピナーの作成角度2

Question

データが完成するのを待っているときにローディングスピナーを作成する必要があります。

私のサービス：

... 
    constructor(private _http:Http) { 

    } 
    getDataFromApi() { 
    return this._http.get('https://api.punkapi.com/v2/beers') 
     .map(res => res.json()); 
    } 

私のコンポーネント：

... 
export class MainListComponent implements OnInit { 
    getData:Array<Beer>; 
    constructor(private _apiDataService:ApiDataService) {} 

    onTestGet() { 
    this._apiDataService.getDataFromApi().subscribe( 
     res => { 
     this.getData = res; 
     } 
    ); 
    } 

    ngOnInit() { 
     this.onTestGet(); 
    } 
} 

私はNPMにスピナーを見つけましたが、私はそれを使用する方法がわかりません。私は何かが読み込まれている間、Webページを無効にする必要があります。

Answer 1

前にshowメソッドでローディングしているサービスセットを呼び出すと、レスポンスを取得した後、そのメソッドを隠しメソッドに設定します。

同様に、ここで確認できます。 https://www.npmjs.com/package/ng4-loading-spinner

Answer 2

あなたはフォントを恐ろしい使用することができます - アニメーションアイコン：http://fontawesome.io/examples/ やサービスを呼び出す前に、それを表示し、テンプレートで応答

_isLoading: boolean; 
.... 
    this._isLoading = true; 

    this.myService.get("/api/...") 
      .subscribe(res => { 
        ..... 
         this._isLoading = false; 
      } 
     ); 

を得た後に隠す：

<i *ngIf="_isLoading" 
    class="fa fa-circle-o-notch fa-spin fa-3x fa-fw" 
    style="margin: auto;display:block;"></i>