Использование углового приложения быстрого старта (https://github.com/angular/quickstart/blob/master/README.md). Использование угловых 2.1.1

При использовании * ngFor первый элемент списка не появляется на странице. Я не получаю ошибок в своей консоли, но вижу следующий вывод журнала консоли из ngOnInit вteacher.component.ts:

Erty
Dave
Sarah
Walter
undefined

Последнее «неопределенное» означает, что первый элемент массива переопределяется, но я не знаю почему.

Вот скриншот вывода - код выложен ниже.

Обратите внимание, что первый учитель отсутствует в повторяющемся блоке, но отсутствует в массиве json.

Код:

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"
    ];
}

Спасибо за помощь!