angular - ngx-spinner 与 Angular 页面的加载不同步

Question

我已经在我的 Angular 7 应用程序中实现了 ngx-spinner。

微调器加载但我希望它仅在加载数据时旋转。目前我可以提前看到页面的某些部分，然后加载微调器。

我哪里错了？

我已经在 getAllocationsDetails() 中编写了 this.spinner.show();

HTML

<style>

  .alert {
    margin-top: 10px;
    height: 500x;
    position: relative;
    width: 100%;
    /* padding: 15px; */
    bottom: 0%;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
  }

  .alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
  }


  table {
    border-collapse: collapse;
  }

  .spacing {
    padding-top: .5em;
    padding-bottom: .5em;
  }

  .k-tabstrip>.k-content.k-state-active {
     display: none!important;
}

</style>

<ngx-spinner bdOpacity = 0.9
bdColor = "#ce6d43"
size = "medium"
color = "#fff"
type = "ball-spin"
fullScreen = "true"
> <p style="color: white" > Loading... </p>
</ngx-spinner>

<div class="form-group row col-md-12" style="margin-top:30px">
  <label for="inputFax" class="col-md-1  col-form-label " style="font-weight: bold;">Eval Date</label>
  <div class="col-md-1">

    <kendo-datepicker style="width: 100% ;float: left;"  [format]="'MMMM yyyy'"  [topView]="'decade'" [bottomView]="'year'" [(ngModel)]="evalDate"
      (valueChange)="evalDateChanged($event)">
    </kendo-datepicker>
  </div>

  <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
      (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
      EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
</div>

<div class="form-group row">
  <div class="panel panel-default col-md-12">
    <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
      <div [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
        <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
            All</a></span>
        <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
            All</a></span>
        <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
          [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
          rowSelection="single">
        </ag-grid-angular>
      </div>

    </div>
  </div>
</div>

<div class="form-group row">

  <div class="panel panel-default col-md-12">
    <div style="height: 100%; width: 100%;"
      *ngIf="AllocationDetails && AllocationDetails.MissingProducts" class="alert alert-danger col-md-5">
      <p><strong>The investments made in the following products are not included in this report:</strong></p>
      <table>
        <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
          <tr>
            <th> {{group[0].ProductType}}</th>
          </tr>
          <tr *ngFor="let post of group">
            <td> {{ post.ProductName  }} </td>
          </tr>
          <tr>
            <td class="spacing"></td>
          </tr>
        </ng-container>
      </table>
    </div>

    <div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
      class="col-md-7">
      <app-pie-chart [series]="allocation_series"></app-pie-chart>
    </div>


  </div>
</div>

typescript 组件

import { Component, NgZone, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { AllocationsService } from '../services/allocations.service';
import { formatDate } from '@angular/common';
import { GridOptions } from 'ag-grid-community/dist/lib/entities/gridOptions';
import { Comparator } from '../utilities/comparator';
import { ActivatedRoute } from '@angular/router';
import { NgxSpinnerService } from 'ngx-spinner';


@Component({
    selector: 'mgr-allocations',
    templateUrl: './allocations.component.html'
})


export class AllocationsComponent implements OnInit {

    private Error: string;
    public evalDate: Date;
    private _evalDate: Date;
    public AllocationDetails: any;
    private _ManagerStrategyId: number;
    public GridOptions: GridOptions;
    ExportingToExcel: boolean;
    windowHeight: any;
    offset: number;
    ngZone: any;
    router: any;
    Comparator: Comparator;
    Route: any;
    public allocation_series: any;
    public LoadingAllocations = true;

    public get ManagerStrategyId(): number {
        return this._ManagerStrategyId;
    }


    @Input()
    public set ManagerStrategyId(value: number) {
        this._ManagerStrategyId = value;
    }


    constructor(private allocationsService: AllocationsService, private comparator: Comparator,
        private zone: NgZone, private route: ActivatedRoute,private spinner: NgxSpinnerService) {
        this.Comparator = comparator;
        this.Route = route;

        window.onresize = (e) => {
            this.ngZone.run(() => {
                this.windowHeight = window.innerHeight - this.offset;
                setTimeout(() => {
                    if (!this.GridOptions || !this.GridOptions.api) {
                        return;
                    }
                    this.GridOptions.api.sizeColumnsToFit();
                }, 500, true);
            });
        };
    }

    private FormattedDate(dateToFormat: Date): string {
        return formatDate(dateToFormat, 'yyyy/MM/dd', 'en');
    }


    setGridOptions() {
        this.GridOptions = {
            columnDefs: this.getColumns(),
            enableFilter: true,
            treeData: true,
            enableColResize: true,
            animateRows: true,
            groupDefaultExpanded: 1,
            enableSorting: true,
            suppressAggFuncInHeader: false,

            getDataPath: function (data) {
                return data.Hierarchy;
            },
            onGridReady: e => {
                if (!e || !e.api) {
                    return;
                }
                e.api.sizeColumnsToFit();
                this.setDefaultSortOrder();
            },
            getRowStyle: (params) => {
                if (params.node.level === 0) {
                    return { 'background-color': '#FCE7D7' };
                }
            },

            autoGroupColumnDef: {
                headerName: 'Manager Strategy', width: 300,
                valueFormatter: uniqueColumn
            },

        };
        function uniqueColumn(params) {
            //     if (!params.value)  return;
            //    return  params.value.split('#')[0];
            const startIndex = params.value.indexOf('#');
            if (startIndex === -1) { return params.value; }

            const endIndex = params.value.length;
            return params.value.replace(params.value.substring(startIndex, endIndex), '');

        }
    }

    ngOnInit() {


        // setTimeout(() => {
        //     /** spinner ends after 5 seconds */
        //     this.spinner.hide();
        // }, 5000);

        this.evalDate = new Date();
        this.setGridOptions();
        this.getAllocationsDetails(this.FormattedDate(this.evalDate));


    }

    public getAllocationsDetails(evalDate: string) {
        if (this.ManagerStrategyId != null) {
            this.initGrid();

            this.allocationsService.getAllocationsDetails(this.ManagerStrategyId, evalDate)
                .subscribe(data => {
                    this.spinner.show();
                    this.LoadingAllocations = true;
                    this.AllocationDetails = data;

                    this.GridOptions.rowData = this.AllocationDetails;
                    this.allocation_series = this.AllocationDetails.ChartData;

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

                },
                    err => {
                        this.Error = 'An error has occurred. Please contact BSG';
                    },
                    () => {
                    });
        }
    }


    downloadFundAllocationDetails() {
        this.ExportingToExcel = true;
        this.allocationsService.downloadFundAllocationDetails(this.ManagerStrategyId, this.evalDate)
            .subscribe(blob => {
                const fileName = ' as of ' + 'TestDate';
                const fileURL = window.URL.createObjectURL(blob);
                const extention = '.xlsx';
                const downloadLink = document.createElement('a');
                downloadLink.href = fileURL;
                downloadLink.download = fileName + extention;
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
                this.ExportingToExcel = false;
            },
                err => {
                    this.ExportingToExcel = false;
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });
    }


    public evalDateChanged(value: Date): void {
        this.getAllocationsDetails(this.FormattedDate((value)));
    }

    GridHeight() {
        if (!this.windowHeight) {
            this.windowHeight = window.innerHeight - this.offset + 10;
        }
        return this.windowHeight;
    }


    setDefaultSortOrder() {
        const defaultSortModel = [
            { colId: 'ManagerStrategyName', sort: 'asc' },
            { colId: 'UsdEmv', sort: 'desc' }
        ];
        this.GridOptions.api.setSortModel(defaultSortModel);
    }

    private initGrid() {
        const self = this;
    }

    private getColumns(): Array<any> {
        const self = this;
        const definition = [
            { headerName: 'Date', field: 'EvalDate', hide: true },
            { headerName: 'Firm ID', field: 'FirmID', hide: true },
            { headerName: 'Manager Strategy ID', field: 'FirmName', hide: true },
            { headerName: 'Firm', field: 'ManagerStrategyID', hide: true },
            { headerName: 'Manager Strategy', field: 'ManagerStrategyName', hide: false },
            { headerName: 'Fund ID', field: 'ManagerFundID', hide: true },
            { headerName: 'Fund', field: 'ManagerFundName' },
            { headerName: 'Product Name', field: 'ProductName'},
            {
                headerName: 'As Of', field: 'EvalDate',
                cellStyle: {textAlign: 'right'}
            },
            {
                headerName: 'EMV (USD)', field: 'UsdEmv', valueFormatter: this.currencyFormatter, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: {textAlign: 'right'}
            },
            {
                headerName: '% of Fund Strategy', field: 'GroupPercent', valueFormatter: this.formatPercent, rowGroup: false,
                cellRenderer: 'agGroupCellRenderer',
                aggFunc: 'sum',
                cellStyle: {textAlign: 'right'}
            },
            {
                headerName: '% of Product', field: 'WeightWithEq',
                 valueFormatter: this.formatPercent,
                 cellStyle: {textAlign: 'right'}
            }
        ];
        return definition;
    }


    public expandAll() {
        this.GridOptions.api.expandAll();
    }

    public collapseAll() {
        this.GridOptions.api.collapseAll();
    }


    currencyFormatter(number) {
        // this puts commas into the number eg 1000 goes to 1,000,
        if (!isNaN(number.value)) {
            number = Math.floor(number.value).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            number = number === '0' ? '0.00' : number;
            return '$' + number;
        }
    }

    formatPercent(number) {
        if (!isNaN(number.value) && number.value !== null) {
            return (number.value).toFixed(2) + '%';
        }
    }

}

服务代码

该服务返回一个可观察对象。它调用 http.get

getAllocationsDetails(mgrStrategyId: number, evalDate: string) {
                let pars = new HttpParams();
                pars = pars.append('id', mgrStrategyId.toString());
                pars = pars.append('date', evalDate);
                const url = this.config.api.allocationDetails;
                return this.http.get(url, { params: pars, withCredentials: true });
    }

Answer 1

您的问题是您在订阅中显示微调器。这是当可观察结果准备就绪时正在执行的代码。

相反，您应该在可观察订阅之前启动微调器，并在可观察完成时运行的 finalize 函数内停止旋转(参见 docs )

RxJS 6 语法

(您必须使用 .pipe 运算符并导入 finalize 函数)

import { finalize } from 'rxjs/operators';

...

this.spinner.show();

this.allocationsService.getAllocationsDetails(this.ManagerStrategyId, evalDate)
  .pipe(
    finalize(() => this.spinner.hide())
  )
  .subscribe(data => {
    // Handle your data
  });