我必须在我的数据等待完成时创建加载旋转器。
我的服务:
...
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上找到了一个旋转器,但我不知道如何使用它。我必须在加载某些内容时禁用网页。
在调用Show方法上的服务集加载旋转器之前,然后在隐藏方法上获得响应设置后。
同样,您可以在这里看到它。https://www.npmjs.com/package/ng4-loading-pinner
您可以使用字体很棒 - 动画图标: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>