Question

我需要显示微调框，直到从httpclient获取数据为止。但它没有显示微调器。我只需要显示微调器或加载器，直到数据来自api，以便用户cab看到数据正在加载。还是.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 = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.php?company_id='+this.userFilter.company_id;
 }else{
 let url = 'http://api.igiinsurance.com.pk:8888/insurance_IGItakaful/insurance-api/get_claims.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>

它没有显示任何错误。并且不显示微调器。

Answer 1

您需要在ngAfterViewInit中调用spinner.show（）；如果不在这里，则this.spinner是未定义的

ngAfterViewInit(): void { this.spinner.show(); }

Answer 2

尝试一下。 Example in the stackblitz

在您的打字稿文件中

import { NgxSpinnerService } from "ngx-spinner";
constructor(private spinner: NgxSpinnerService) { }

ngOnInit() {
    this.spinner.show();

    setTimeout(() => {
         this.spinner.hide();
    }, 2000);
}

Answer 3

我遇到的问题是ngx-spinner没有显示给我。我将其降级为7.0.0，现在对我有用 "ngx-spinner": "7.0.0"

不显示角度ngx-spinner

3 个答案: