在等待数据时显示加载组件

Question

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

是否有方法将自定义标记（来自微调组件）放置在我正在等待数据的HTML模板中？

我的项目是基于Angular Drupal POC

我的文章组成的名单看起来是这样的：

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

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

Answer 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> 

希望这会帮助你。