等待数据时显示加载组件

【问题标题】：Display a loading component while waiting for the data等待数据时显示加载组件
【发布时间】：2016-12-08 01:37:42
【问题描述】：

在等待数据显示时如何显示微调器？

有没有办法在我等待数据的 HTML 模板中放置自定义标签（来自微调器组件）？

我的文章列表组件如下所示：

search() {
    this.sub = this.nodeService.getNodes({ q: this.q })
      .subscribe(
        res => {
          this.nodes = this.filteredNodes = res;
          this.totalItems = this.nodes.length;
        }
    );
  }

【问题讨论】：

标签： angular typescript

【解决方案1】：

我在等待数据显示时如何显示微调器？

将微调器组件绑定到控制器上的某个 loading 属性，例如

search() {
    this.loading = true;
    this.sub = this.nodeService.getNodes({ q: this.q })
      .subscribe(
        res => {
          this.loading = false;
          this.nodes = this.filteredNodes = res;
          this.totalItems = this.nodes.length;
        }
    );
  }

【讨论】：

【解决方案2】：

试试这样的：

search() {
  this.isNodeLoading = true;
  this.sub = this.nodeService.getNodes({ q: this.q })
   .subscribe(
     res => {
        this.isNodeLoading = false;
        this.nodes = this.filteredNodes = res;
        this.totalItems = this.nodes.length;
     }
  );
}

并最初定义isNodeLoading: boolean= false;

然后像这样在模板中使用：

<div class="loader-inner ball-clip-rotate" *ngIf="isNodeLoading">
       <div></div>
</div>

希望这会对你有所帮助。

【讨论】：