Question

我在Angular 2项目中使用ng-spin-kit。

在组件中我有这段代码：

loading: boolean;

setTimeout(() => { this.loading = true },
  1000
);

在html中我有这个：

<sk-fading-circle class="loader" [hidden]="loading"></sk-fading-circle>

所以，我让spinner运行，但它只运行了1000ms。

我需要运行微调器才能加载API的内容。

我不知道setTimeout()是否是最好的方法。

有谁知道我该怎么做？

更新

这是服务

export class AppService {

  endPoint = AppConstants;
  handler = AppHandler;

  constructor(private http: Http) {}

  getCandidates() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');
    headers.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

    return this.http.get(this.endPoint.API_ENDPOINT_GET_CANDIDATES, {
      headers: headers
    })
      .toPromise()
      .then((res: Response) => {
        const data = res.json();
        const allCandidate = [];

        data.result.forEach((entry) => {
          const candidate = new Candidate();

          candidate.college = entry.college;
          candidate.cultural_fit = entry.cultural_fit;
          candidate.email = entry.email;
          candidate.graduation = entry.graduation;
          candidate.logic_test = entry.logic_test;
          candidate.mobile_phone = entry.mobile_phone;
          candidate.name = entry.name;

          allCandidate.push(candidate);
        });
        return allCandidate;
      })
      .catch(this.handler.handleError);
  }

}

Answer 1

我就是这样做的

loading: boolean = false;
getCandidates() {
  // ...

  this.loading = true;

  return this.http.get(this.endPoint.API_ENDPOINT_GET_CANDIDATES, {
    headers: headers
  }).map(res => res.json())
  .catch(this.handler.handleError)
  .finally(() => this.loading = false)
  .subscribe(res => {
    // ...
  });
}

Answer 2

可能的选择很少，主要是：

使用observable从API中检索数据（即已经成为角度HTTP的一部分，订阅并设置加载到检索到数据/错误后为false
传递完成后执行的回调函数。

Answer 3

首先你应该使用* ngIf：

<sk-fading-circle class="loader" *ngIf="loading"></sk-fading-circle>

在组件中使用

loading: boolean = true;

如果您的api使用Observables，那么您的代码应如下所示：

this.api.subscribe(data => ....
...
() => {this.loading = false});

这会导致加载数据后立即删除微调器。

Angular 2 ng-spin-kit

3 个答案: