在角度 2 中实现微调器

Question

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

Pre-Bootstrap Loading Screen For Angular2

但是spinner一直不停地在表体中占据了一个固定的位置，它并没有随着数据的完全加载而消失。在上面显示的文章中，他们提到使用

 <app></app> 

或

 <my-app></my-app> 

 (or probably 

 <app-root></app-root> 

  also)  

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

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>

Answer 1

<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 应该足够了。

如果加载的类不包含任何内容，您可能不需要包装器。不知道有哪些款式。

如果这对您来说还不够，或者发布您尝试使用的引导组件的链接。