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找到了一个微调器，但我不知道如何使用它。我必须在加载某些内容时禁用网页。

Answer 1

在show方法上调用服务集加载微调器之前以及在获取响应后，在隐藏方法上设置该东西。

同样，你可以在这里看到它。 https://www.npmjs.com/package/ng4-loading-spinner

Answer 2

您可以使用Font Awesome - 动画图标：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>

创建加载微调器角度2

2 个答案: