在等待數據時顯示加載組件

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> 

希望這會幫助你。