@ Компонент дает ошибку в angular2 + - PullRequest
0 голосов
/ 07 мая 2018

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

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

и

для реализации блесны в angular2 +

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

Error

   Argument of type '{ selector: string; 'my-app': any; templateUrl: 
   string; styleUrls: string[]; }' is not assignable to parameter of 
   type 'Component'.
    Object literal may only specify known properties, and ''my-app'' 
   does not exist in type 'Component'.

transaction.component.html

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

     <my-app>
      <div class="loaded" *ngIf="loaded">
      <div class="text-center">
       <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <div> Data Waiting To Be Loaded </div>
       </div>
      </div>
    </my-app>

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

transaction.component.ts

   @Component({
    selector: 'app-transaction','my-app',
    templateUrl: './transaction.component.html',
    styleUrls: 
     ['./transaction.component.scss',]

     }) 


 export class TransactionComponent implements OnInit {
 public loaded=false;


 ngOnInit() {

 this.loaded=true;


  }

 insideSearchByText(filterObj) {

    this.http.post("http://" + url + ":" + port + 
  .....

   .map(result => this.result = result.json(),

    this.loaded=false)


    ....
    }});
    }

transaction.component.scss

  .loaded {
   display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
   }

Ответы [ 2 ]

0 голосов
/ 07 мая 2018
@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html',
  styleUrls: 
    ['./transaction.component.scss',]
})

Другой компонент (если он у вас есть):

@Component({
      selector: 'my-app',
      templateUrl: './my-app.component.html',
      styleUrls: 
        ['./my-app.component.scss',]
    })
export class MyAppComponent {
...
}

А в шаблоне используйте тот селектор:

<my-app>
  <div class="loaded" *ngIf="loaded">
    <div class="text-center">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
      <div> Data Waiting To Be Loaded </div>
    </div>
  </div>
</my-app>

Если у вас нет MyAppComponent, вы не можете использовать его в шаблоне. Почему у вас есть в шаблоне?

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

Я думаю, что ваша проблема - синтаксическая ошибка. Вы определили два селектора для этого компонента. Я думаю, что эта строка в вашем Transactions.component.ts

selector: 'app-transaction','my-app',

должно быть только

selector: 'app-transaction',

поскольку селектор не принимает массивы в качестве значения (как, например, styleUrls).

...