Ghosttje Ghosttje - 2 months ago 6
Javascript Question

Angular 2: Component doesn't render

I am using a custom component in angular 2 but it doesn't render. I cannot find out why it doesn't render.

Attempt 1: This is the html page where the component is used (doesn't work):

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


Screenshot(Nothing)
Attempt 1

Attempt 2: When I put the projectlist tag inside the div, then it actually work. 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>


Screenshot (Shows only one time (the second projectlist and not the first))
Attempt 2

I use the component somewhere else and there it actually works correctly, so don't know what the problem is.

Here is a github link: Github

If you need extra info or code just ask.

Answer

I investigated a bit this issue and found that the problem occurs only in chrome browser.

Chrome sends a request from ProjectListComponent with strange headers enter image description here

As workaround you can solve it by the trick

projectlist.component.ts

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