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

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

我从以下url获得一个简单的CSS微调器：

我在main.css文件中添加了css，然后在我的 app.component.html：

这是我的app.component.html

我的app.component.html中可能需要一些if条件，所以它可能看起来像这样？：

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

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

或者我需要做这样的事

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

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

然而，这现在不起作用，我不知道如何实现这一点，在服务从数据库获取数据时简单地显示微调器，并在获取所有数据时隐藏它

谢谢各位

---

干杯

您可以使用“角度观察”选项显示隐藏和了解数据库加载成功和读取完整响应

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 observable示例的组件中更改微调器的状态

组件

---

修改服务以使用BehaviorSubject而不是纯布尔值，并利用rxjs pipe and tap操作符，以便可以在服务本身中设置微调器标志，而不是在每个服务使用者组件中切换

@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))
    );
  }
}

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 ?
      }

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;
  }
})

@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))
    );
  }
}

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