角度2：组件不渲染

Question

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

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 1

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

As workaround you can solve it by the trick

projectlist.component.ts

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