Угловой 2: Компонент не отображает

Question

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

Попытка 1: Это страница HTML, где используется компонент (не работает):

<div class="container-fluid container-content" *ngIf="project"> 
    <div class="projectdetail" style="background: green"> 
     <img [src]="project.img" [alt]="project.name" style="height: 150px" /> 
     <h2>{{project.name}}</h2> 
     <div> 
      <carousel interval="5000" noWrap="false"> 
      <slide *ngFor="let slidez of slides; let index=index"> 
        <img [src]="slidez.image" class="carouselimg" /> 
        <div class="carousel-caption"> 
         <h4>Slide {{slidez.id}}</h4> 
         <p>{{slidez.text}}</p> 
        </div> 
       </slide> 
      </carousel> 
     </div> 
     <p>{{project.description}}</p> 
    </div> 
    <!--hidden-mm hidden-sm hidden-xs--> 
    <div class="projects" style="background: red"> 
     qsdfqsdfqsdf 
     <projectlist></projectlist> 
    </div>  
</div> 

Скриншот (Nothing)

Попытка 2: Когда я помещаю тег projectlist внутри div, тогда он фактически работает. Weird?

<div class="container-fluid container-content" *ngIf="project"> 
    <div class="projectdetail" style="background: green"> 
     <img [src]="project.img" [alt]="project.name" style="height: 150px" /> 
     <h2>{{project.name}}</h2> 
     <div> 
      <carousel interval="5000" noWrap="false"> 
      <slide *ngFor="let slidez of slides; let index=index"> 
        <img [src]="slidez.image" class="carouselimg" /> 
        <div class="carousel-caption"> 
         <h4>Slide {{slidez.id}}</h4> 
         <p>{{slidez.text}}</p> 
        </div> 
       </slide> 
      </carousel> 
     </div> 
     <p>{{project.description}}</p> 
<!-- ADDED THIS--> 
     <projectlist></projectlist> 
    </div> 
    <!--hidden-mm hidden-sm hidden-xs--> 
    <div class="projects" style="background: red"> 
     qsdfqsdfqsdf 
     <projectlist></projectlist> 
    </div>  
</div> 

Скриншот (Показывает только один раз (второй projectlist и не первый))

Я использую компонент где-нибудь еще, и там на самом деле работает правильно, так что не знаю, что проблема в.

Вот ссылка GitHub: Github

Если вам нужна дополнительная информация или код просто спросить.

Answer 1

Я немного изучил эту проблему и обнаружил, что проблема возникает только в браузере Chrome.

Chrome посылает запрос от ProjectListComponent со странными заголовками

В РЕШЕНИЕ Можно решить с помощью трюка

projectlist.component.ts

ngOnInit() { 
    setTimeout(() => this.getProjects(), 0); 
}