我需要在从httpclient获取数据之前显示旋转图标。但是旋转图标没有显示。
我只需要在API返回数据之前显示旋转图标或加载程序，以便用户可以看到数据正在加载。我的.html有没有问题？
当我筛选数据时它会显示，但在页面加载时不会显示。
import { Component, OnInit } from '@angular/core';
import { ApiService } from 'app/services/api/api.service';
import { map } from 'rxjs/operators';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { NgxSpinnerService } from 'ngx-spinner';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {
clientData: Observable<any>;
data: any = [];
status: any = [];
countunsettled: any;
countsettled: any;
sums: any;
policy_id:Set = new Set();
constructor(private modalService: NgbModal, private api:ApiService, public httpClient: HttpClient, private spinner: NgxSpinnerService) {
this.getClaims();
}
userFilter: any = { policy_id:'', claim_no:'', member_name:'', status:'', company_id: ''};
openDeal(deletecontent,x){
this.selectedDeal = x;
this.dealModal= this.modalService.open(deletecontent, x);
this.dealModal.result.then(r=>{
}, err=> console.log(err))
}
getClaims(){
this.spinner.show();
if(this.userFilter.company_id){
let url = 'xyz.com.pk'+this.userFilter.company_id;
}else{
let url = xyz.com.pk.php?offset=0&limit=100';
}
this.clientData = this.httpClient.get(url).
subscribe(data => {
console.log(data);
this.spinner.hide();
this.data = data.records;
this.data.forEach(d => this.policy_id.add(d.policy_id));
var status = 'settled';
var status2 = 'submitted';
var countsettled = this.data.filter((obj) => obj.status === status).length;
var countunsettled = this.data.filter((obj) => obj.status === status2).length;
console.log(countsettled);
this.countsettled = countsettled;
console.log(countunsettled);
this.countunsettled = countunsettled;
const sum1 = this.data.filter(item => item.status === 'settled')
.reduce((acc, item) => acc + Number(item.approved_value), 0);
console.log(sum1);
this.sum1 = sum1;
const sum2 = this.data.filter(item => item.status === 'submitted')
.reduce((acc, item) => acc + Number(item.approved_value), 0);
console.log(sum2);
this.sum2 = sum2
}
}
}
HTML模板：
<ngx-spinner></ngx-spinner>
没有显示任何错误，也没有显示旋转器。