Question

我想在加载数据时显示加载程序（简单的gif徽标）。在我的应用程序中，我使用服务类中的函数来获取JSON中的数据，这要归功于url（web服务）。然后，我在另一个类中调用此函数以将数据注入数组。

我在service.ts中的功能：

  getData() {          
    return   this.http
                 .get(myUrl,/*headers*/)
                 .map((res:Response) => res.json());
 }

我在class.ts中的功能：

array : any;

getData() {
this.service.getData()
  .subscribe(
  data => {    
    this.array = data;
  },
  err => console.error(err)
);
}

class.html：

<li *ngFor="let element of array"> {{element}}</li>

也许我可以在.html中使用*ngIf并使用布尔变量来显示加载器或数据但是如何知道数据何时被完全加载以及何时不加载？

感谢提前帮助！

Answer 1

具有布尔状态的

*ngIf很好。 subscribe(...)支持onComplete回调：

getData() {
  this.isLoading = true;
  this.service.getData()
  .subscribe(
    data => {    
      this.array = data;
      // this.isLoading = false;
    },
    err => console.error(err),
    () => this.isLoading = false;
  );
}

重置第一个回调中的状态（我将其添加为注释）也很好，因为Http仅提供单个事件。对于提供多个事件的可观察对象，第三个回调可能更适合，因为当observable关闭且不再发送事件时会调用它。

在Angular2中加载数据时的加载器

1 个答案: