Angular ngx-spinner 不显示

Question

我需要显示微调器，直到从 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>

它没有显示任何错误，也没有显示微调器。

Answer 1

你需要在 ngAfterViewInit 中调用 spinner.show();
如果不在此处，则 this.spinner 未定义

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