реализовать блесну в angular2 + - PullRequest
Новая
       13

реализовать блесну в angular2 +

0 голосов
/ 07 мая 2018

Я пытаюсь использовать спиннер в своем приложении, потому что есть много данных, которые требуют времени для загрузки. Но вот в чем проблема. Я взял эту ссылку в качестве ссылки -

Экран загрузки Pre-Bootstrap для Angular2

Но счетчик продолжает включаться и занимать фиксированное место в теле таблицы, он не исчезает при полной загрузке данных. В показанной выше статье они упомянули, что используя 

 <app></app>

или 

 <my-app></my-app> 

 (or probably 

 <app-root></app-root> 

  also)

Angular автоматически заменит «Загрузка ...» на реальное содержимое после загрузки Angular. Однако это не относится к моей программе. Я также использовал логическую переменную, чтобы скрыть, когда переменная ложна. Но безрезультатно. Пожалуйста, проверьте мой код и руководство соответственно.

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

1 Ответ

0 голосов
/ 07 мая 2018 
<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 должно быть достаточно.

Если загруженный класс не содержит ничего, вам, вероятно, не нужна оболочка. Я не знаю, какие стили там.

Или опубликуйте ссылку на компонент начальной загрузки, который вы пытаетесь использовать, если вам этого недостаточно.

...