Angular ngx-spinner 未显示

问题描述 投票：0回答：7

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

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

angular spinner
7个回答
16
投票

我从 11 升级到 13 时遇到了这个问题。
以下是您需要采取的步骤：

  1. 在 
    package.json
    文件中：
 "dependencies": {
    ...
    "ngx-spinner": "^13.1.1",
    ...

或者点击这里进行安装。

  1. 在 
    angular.json
    文件中：
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "styles": [
              "node_modules/material-design-icons/iconfont/material-icons.css",
              "node_modules/ngx-spinner/animations/ball-circus.css", // This wasn't required in version 11.
              "src/styles.scss" 
            ],
  1. 在 
    app.module.ts
    文件中：
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { NgxSpinnerModule } from "ngx-spinner";
...
          imports: [
                    MatModule,
                    NgxSpinnerModule,
                    CommonModule
          ],
          exports: [
                    MatModule,
                    NgxSpinnerModule,
...
schemas:[CUSTOM_ELEMENTS_SCHEMA] // This is new to version 13 as well,
  1. 在 
    home.component.ts
    文件中：
import { NgxSpinnerService } from 'ngx-spinner';
...
constructor (private spinnerService: NgxSpinnerService, ...){...}
...
//wherever show needed:
this.spinnerService.show();

//wherever you want to hide the spinner:
this.spinnerService.hide();
  1. 在 
    html
    文件中：
...
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="large" color="#fff" type="ball-circus" [fullScreen] = "true"></ngx-spinner>
...

旧版本的设置略有不同。自从我从版本 11 升级到 13 后，微调器停止工作。我花了一天时间才找到适用于版本 13 的设置。

参考：https://www.npmjs.com/package/ngx-spinner

7
投票

需要在ngAfterViewInit中调用spinner.show()； 如果不在这里，则 this.spinner 未定义

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

我必须对@abbas解决方案的这一部分进行更改

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "node_modules/ngx-spinner/animations/ball-circus.css", // This wasn't required in version 11.
          "src/styles.scss" 
        ],

将 CSS 文件的路径添加到 

styles
对我来说不起作用。 所以，我必须像这样
styles.scss
导入它

@import "~ngx-spinner/animations/ball-circus.css";
0
投票

试试这个。 stackblitz 中的示例

在你的打字稿文件中

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

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

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

遇到同样的问题，简单的解决方案是您在 html 中使用的任何动画类型，确保您已在 angular.json 中添加相同的 CSS

例如： HTML：

<ngx-spinner
bdColor="rgba(0, 0, 0, 0.8)"
size="medium"
color="#fff"
type="line-spin-fade" // type
[fullScreen]="false"
><p style="color: white">Loading...</p>
</ngx-spinner>

角度.json / 项目.json(NX)

"node_modules/ngx-spinner/animations/line-spin-fade.css" //use same type css
0
投票

如果设置后您看到叠加层但没有看到动画本身，请重新启动应用程序。之后应该会出现动画。

0
投票

根据您的 Angular 版本使用正确版本的 ngx-spinner。 如果您有 Angular 15，但安装了最新版本的 ngx-spinner，那么您会收到错误消息。

这是所有 ngx-spinner 版本： https://www.npmjs.com/package/ngx-spinner?activeTab=versions

安装方式：

npm i ngx-spinner@<YOUR_VERSION_HERE>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.