Angular 2 First Item in Array Missing using *ngFor

Question

Using the angular quickstart app (https://github.com/angular/quickstart/blob/master/README.md). Using angular 2.1.1

Using *ngFor, the first item of the list doesn't appear on the page. I'm getting no errors in my console, but seeing the following console log output from the ngOnInit in teacher.component.ts:

Erty
Dave
Sarah
Walter
undefined

That last "undefined" means that the first element of the array is being redefined, but I don't know why.

Here's a screenshot of the output -- the code is posted below.

Note that the first teacher is missing from the repeated block, but not in the json array.

Code:

teacher.component.ts:

import { Component, Input } from "@angular/core";

@Component({
    selector: 'teacher',
    template: `
        <p>Teacher {{index}}: {{teacherName}}</p>
    `
})
export class TeacherComponent {
    @Input() teacherName: string;
    @Input() index: number;

    ngOnInit() {
        console.log(this.teacherName);
    }
}

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { TeacherComponent } from './teacher.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [TeacherComponent, AppComponent ],
  bootstrap: [ AppComponent, TeacherComponent ]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';

import { TeacherComponent } from "./teacher.component";

@Component({
    selector: 'my-app',
    template: `<h1>CodeCraft Learning Angular!</h1>
        <pre>{{teachers | json}}</pre>
        <teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>

    `
})
export class AppComponent {
    public teachers: string[] = [
        "Erty",
        "Dave",
        "Sarah",
        "Walter"
    ];
}

Thank you for your help!

Answer 1

The issue is that you are Bootstrapping TeacherComponent in your app.module and it being treated as an entry component which makes the first render break for our purposes.

This change will make it render properly:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { TeacherComponent } from './teacher.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [TeacherComponent, AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And here's some reading on what to bootstrap https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component

Answer 2

I don't see any issue, I tried this in this Plunker! and it works.

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h3>Angular 2 First Item in Array Missing using *ngFor</h3>
     <pre>{{teachers | json}}</pre>
    <teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>
  `
})
export class AppComponent {
   public teachers: string[] = [
        "Erty",
        "Dave",
        "Sarah",
        "Walter"
    ];
}

@Component({
    selector: 'teacher',
    template: `
        <p>Teacher {{index}}: {{teacherName}}</p>
    `
})
export class TeacherComponent {
    @Input() teacherName: string;
    @Input() index: number;

    ngOnInit() {
        console.log(this.teacherName);
    }
}