在angular2 +中实现微调器 [英] to implement a spinner in angular2+

问题描述

我正在尝试在应用程序中使用微调器，因为有很多数据需要花费很多时间才能加载.但这是问题所在.我已将此链接作为参考-

I am trying to use a spinner in my application because there is lots of data that takes time to load. But here is the issue. I have taken this link as reference -

Angular2的Pre-Bootstrap加载屏幕

但是微调器会不断打开并在表体内占据了固定的位置，它不会随着数据的完全加载而消失.在上面显示的文章中，他们提到了使用

But the spinner keeps on and on and has occupied a fixed place in table body , it doesn't disappear as the data loads completely. In the article above shown they have mentioned that using

 <app></app> 

或

 <my-app></my-app> 

 (or probably 

 <app-root></app-root> 

  also)  

加载Angular后，Angular会自动用实际内容替换"Loading ...".但是，这不适用于我的程序.当变量为false时，我还使用了布尔变量来隐藏.但无济于事.请检查我的代码并进行相应的指导.

Angular will automatically replace "Loading..." by the real content once Angular is loaded. However , this doesn't apply in my program. I have also used a boolean variable to hide when the variable is false. But to no avail. Please check my code and guide accordingly.

transaction.component.html

 <table>
 <thead> ....
 </thead>

     <my-app>
      <div class="loaded" [class.loaded]="loaded">
      <div class="text-center">
       <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div>Something witty for your userbase</div>
       </div>
      </div>
    </my-app>

  <tbody>
        .....
  </tbody>
   <table>

transaction.component.ts

 export class TransactionComponent implements OnInit {
 public loaded=false;


 ngOnInit() {

 this.loaded=true;


  }

 insideSearchByText(filterObj) {

    this.http.post("http://" + url + ":" + port + 
   "/transaction/masterSearchTransactionForm/", this.filterObj
      , { headers: new Headers({ 'Authorization': 'Bearer ' + 
    localStorage.getItem('Token') }) })
   .map(result => this.result = result.json(),

    this.loaded=false)

    .subscribe((res: Response) => {
    ....
    }});
    }

错误

 ERROR Error: Uncaught (in promise): Error: Template parse errors:
 'my-app' is not a known element:
 1. If 'my-app' is an Angular component, then verify that it is part 
 of 
 this module.
 2. If 'my-app' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
 to 
 the '@NgModule.schemas' of this component to suppress this message. 
 ("


  [ERROR ->]<my-app></my-app>

推荐答案

<div class="loaded" [class.loaded]="loaded" *ngIf="!loaded">
  <div class="text-center">
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    <div>Something witty for your userbase</div>
  </div>
</div>

您只能在加载时显示该元素，因此 ngIf 应该足够.

You can show the element only when the loading is occurring so ngIf should be enough.

如果加载的类不包含任何内容，则可能不需要包装器.我不知道那里有什么样式.

If the loaded class doesn't contain anything, you probably don't need the wrapper. I don't know what styles are there.

或将链接发布到您尝试使用的引导程序组件，如果这对您来说还不够的话.

Or post the link to the bootstrap component you are trying to use, if this is not enough for you.

这篇关于在angular2 +中实现微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！