Angular5：页面加载时旋转器不能正常工作

Question

以下是我的服务，我发出两个事件dataLoaded和loadingData。当数据正在加载和已经加载时，我想显示和隐藏GIF图像，并在组件中捕获这两个事件并更改布尔变量的值。但是，当页面首次加载时，初始加载GIF不显示，当数据加载完成后，GIF才会出现。如果我选择搜索过滤器，则可以正常工作，而且当我调试代码时，showLoading的值也成功更新。

import { forwardRef, Injectable, EventEmitter } from '@angular/core';
    import { Http, Headers, RequestOptions, Response, URLSearchParams } from '@angular/http';
    import 'rxjs/add/operator/toPromise';


    @Injectable()
    export class SearchService {
     loadingData = new EventEmitter();
        dataLoaded = new EventEmitter();
     pages: any = {};
        searchResults = [];
     search() {
            this.loadingData.emit("ShowLoading")
            this.performSearch().then(response => {
                this.searchResults = response.json();
                this.pages = this.searchResults['pages'];
                this.searchResults = this.searchResults['data'];
                this.resultsUpdated.emit('SearchResultsUpdated');
                this.dataLoaded.emit("HideLoading")
            }, error => {
                   this.dataLoaded.emit("HideLoading")
             });
        }
    }

组件

import { Component, ViewChild, ElementRef } from '@angular/core';
import { SearchService } from '../../search.service';
/*import {Alert} from "../../alert.component";*/
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { SavedSearchComponent } from '../saved-search/saved-search.component';
@Component({
 selector: 'property-onion-search-results',
  templateUrl: './search-results.component.html'
})

export class SearchResultsComponent {
  @ViewChild('searchResultArea') resultsArea: ElementRef;
  searchResults: any[] = null;
  closeResult: string;
  view = 'regular';
  resultInformation: any[];
  filterString: string = "";
  resultCount: number = 0;
  numbers: any[] = null;
  showLoading;

  constructor(private searchService: SearchService, private modalService: NgbModal) {

    this.searchService.resultsUpdated.subscribe(data => {
      this.searchResults = this.searchService.getResults();
      this.filterString = this.searchService.toString();
      this.resultCount = this.searchService.pages.total;
      var pages = this.searchService.pages.number_of_pages;
      if (this.searchService.pages.total > 25) {
        this.numbers = new Array(pages).fill(1).map((x, i) => i);
      } else {
        this.numbers = null;
      }
      this.resultsArea.nativeElement.click(); // THis is a hack to fix refresh issue of this area. This area doesn't get refreshed unless you click somewhere in the browser.          
    });

    this.searchService.loadingData.subscribe(data => {
      console.log("show")
      this.showLoading = true
    });
    this.searchService.dataLoaded.subscribe(data => {
      console.log("hide")
      this.showLoading = false
    });

  }
}

html

<img class="loading" *ngIf="showLoading" src="images/loader.gif"/>

- SFAH

Answer 1

对于初始加载，您应该直接在组件中定义 showLoading：

showLoading:boolean = true;

- Pterrat