在Angular 2中获取数据时显示加载程序

Question

我有一个带有选择器PF('wizard').loadStep(PF('wizard').cfg.steps[0], true); 的loader.component.ts。

此标记位于main-compontent.html中并显示。

SELECT V_DATE,
       FLAG,
       V_NUM,
       V_NARATION,
       SUM(VDTL.DR_AMOUNT) OVER(ORDER BY V_DATE ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) AS DEBIT,
       SUM(VDTL.CR_AMOUNT) OVER(ORDER BY V_DATE ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW) AS CREDIT
(SUM(VDTL.DR_AMOUNT) OVER(ORDER BY V_DATE ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)-SUM(VDTL.CR_AMOUNT) OVER(ORDER BY V_DATE ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW)) as TOTAL
FROM VOUCHARDETAIL AS VDTL
INNER JOIN VOUCHARMASTER AS VMST
ON VDTL.DTL_NUM =VMST.MST_NUM
WHERE (V_DATE BETWEEN '12-03-2017' AND '14-03-2017') AND (AC_CODE=60030002) 
ORDER BY V_DATE

我想，在我获取数据时，加载器应该只显示。

我使用以下代码获取数据：

<app-loader>

正如您所看到的，showLoader变量是否为true，并且在获取数据后它应该为false，但它不起作用。怎么了？

Answer 1

将this.showLoader = false;移至subscribe块的success和err功能。由于javascript的异步功能，您的showLoader在后​​端呼叫之前设置为False。

一个简单的ngIf条件会更好。

<app-loader *ngIf="showLoader">

Answer 2

您很可能希望在收到数据后隐藏微调器 或发生错误

showLoader = true;    

ngOnInit() {
  this.httpService.getOffer()
      .subscribe(
        data => {
          this.offers = data;
          this.showLoader = false;
        },
        error => this.showLoader = false
      )
}