使用服务从数据库中获取数据时，如何显示和隐藏简单的CSS微调器-Angular 2>

Question

在我的应用程序中，当我单击一个按钮时，我想显示一个微调器。

我从以下网址获得了一个简单的CSS微调器： https : //projects.lukehaas.me/css-loaders/

我将css添加到main.css文件中，然后在app.component.html添加了以下代码行：

<div class="loader">Loading...</div>

我选择app.component.html的原因是，我想使此微调器在我的应用程序中随处可见。

但是现在在按钮上单击，我将从数据库中获取人员列表。 这是它的外观（我的组件）：

export class PersonComponent implements OnInit {

  private modalId: string;
  private persons: Array<Person>;

  constructor(private personsService: PersonsService) {}

  ngOnInit() {}

  // Here I'm getting data from database and I would like to display spinner/loader until all of data is loaded
  show() {
    $('#' + this.modalId).modal('show');
    this.personsService.getAll().do(data=>console.log(data)).subscribe(persons => this.persons = persons);
  }
}

这是我的app.component.html

<router-outlet></router-outlet>

<div class="loader">Loading...</div>

这是我的PersonsService.ts ，它负责从数据库中获取数据：

@Injectable()
export class PersonsService {

  public showSpinner: boolean = false;

  constructor(private _http: HttpClient) { }

  getAll(): Observable<Person[]> {
    this.showSpinner(); //Cannot invoke expression whose type lacks a call signature. -> I got this error here
    return this._http.get<Person[]>(apiUrl)
      .catch(
      (error: HttpErrorResponse) => {
          return Observable.throw(error);
      });
  // Somewhere here I would hide a spinner? Is this possible, I mean will this be shown when data is fully loaded or ?
  }


  displaySpinner() {
    this.showSpinner = true;
  }

  hideSpinner() {
    this.showSpinner = false;
  }

我可能需要在app.component.html中添加一些if条件，因此它可能看起来像这样？ ：

<div *ngIf="personsService.showSpinner" class="loader">
    Loading...
</div>

还是我需要做这样的事情？ ：

<div *ngIf="personsService.showSpinner">
    <div class="loader">Loading...</div>
</div>

但是，这现在不起作用，我不知道如何实现这一点，当服务从数据库中获取数据时仅显示微调框，而在提取所有数据时将其隐藏。

多谢你们

干杯

Answer 1

您可以显示隐藏并知道数据库加载成功以及使用角度观察选项读取完整响应

getAll(): Observable<HttpResponse<Person[]> {
        return this._http.get<Person[]>(apiUrl,{ observe: 'events' })
          .catch(
          (error: HttpErrorResponse) => {
              return Observable.throw(error);
          });
      // Somewhere here I would hide a spinner? Is this possible, I mean will this be shown when data is fully loaded or ?
      }

您可以在服务中设置微调器，也可以在预订getAll（）可观察示例的组件内部更改微调器的状态

components.ts

this.service.getAll().subscribe((response:HttpEvent<Object>)=>{
  //console.log(response);
  //import the HttpEventType from @angular/common/http
  if(response.type==HttpEventType.DownloadProgress){
    this.showSpinner = true;
  }
  if(response.type==HttpEventType.Response){
  this.showSpinner = true;
  }
})

Answer 2

修改您的服务以使用BehaviorSubject而不是纯boolean并利用rxjs pipe和tap运算符的优势，以便您可以在服务本身中设置spinner标志，而不用在每个服务使用者组件中进行切换。

@Injectable()
export class PersonsService {

  public showSpinner: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly apiUrl = "https://api.github.com/users";

  constructor(private _http: HttpClient) { }

  getAll(): Observable<Person[]> {
    this.showSpinner.next(true);
    return this._http.get<Person[]>(this.apiUrl).pipe(
      tap(response => this.showSpinner.next(false), 
      (error: any) => this.showSpinner.next(false))
    );
  }
}

您可以使用async管道来访问showSpinner

<div class="loader" *ngIf="_personService.showSpinner | async">
</div>
<div *ngIf="!(_personService.showSpinner | async)">
  <button (click)="foo()">Click here</button>
  <pre>
    {{response | json}}
  </pre>
</div>

演示