根应用程序中属性的奇怪行为

Question

我有一个包含3个组件和根组件AppComponent的角度应用。

使用根html组件app.component.html我使用了角度2材料，我有

<md-progress-bar mode="indeterminate" *ngIf="loading"></md-progress-bar>

使用app.component.ts

loading: boolean = true;

因此，当要加载一个组件时，会显示进度条。

我的第一个组成部分：AnalyticsDataComponent效果很好，看起来像：

   loading;

ngOnInit(): void {
this.auth.redirectNotAuthUser();
this.getData();
    }


        getData() {
            this.loading = true;
            this.ready = false;
            this.services.getData(this.cookie.get(), this.startDate, this.endDate)
                .subscribe(
                (response) => {
                    this.analyticsData = []; // clean previus data from object
                    this.overall = response.overall;
                    response.data.forEach((element: any, index: number) => {
                        this.analyticsData.push(
                            new AnalyticsData({
                                pagePath: element.pagePath,
                                pageTitle: element.pageTitle,
                                wholeProfit: element.wholeProfit,
                                uniquePageView: element.uniquePageView,
                                entrance: element.entrance,
                                avgTime: element.avgTime,
                                bounceRate: element.bounceRate,
                                pageView: element.pageView,
                                author: element.author
                            })
                        );
                    });
                    this.ready = true;
                    this.whileLoding = true;
                },
                (error) => {
                    this.loading = false;
                    this.whileLoding = true;
                    console.log('Error happened' + error);
                },
                () => {
                    this.loading = false;
                    this.shareService.analyticsData = this.analyticsData;
                    this.shareService.overallData = this.overall;
                    console.log('the subscription is completed');
                }
                );
        }

我的第二个组成部分：TeamIncomeComponent也很完美，看起来像：

  loading;
  ngOnInit() {
    this.auth.redirectNotAuthUser();
    this.getTeamIncomeReport();
  }

  getTeamIncomeReport() {
    this.loading = true;
    this.service.get().subscribe(
      (data) => {
        this.team = data.team;
        this.users = this.sort.object(data.users);
        this.months = data.months;
      },
      (error) => { },
      () => {
        this.loading = false;
        this.isReady = true;
      }
    );
  }

问题在于第三个组成部分：AdvertCommissionComponent：

    loading;
  ngOnInit() {
    this.auth.redirectNotAuthUser();
    this.getCommissions();
  }

  getCommissions() {
    this.loading = true;
    this.service.get().subscribe(
      (data) => {
        this.advertCommission = data;
      },
      (error) => { },
      () => {
        this.loading = false;
        this.isReady = true;

      }
    );
  }

请求完成后，仍会显示进度条。就像那样AdvertCommissionComponent无法访问loading属性。