Angular 2 ngFor first occurence undefined -

i'm trying angular 2 , i'm facing weird issue don't understand.

i make simple todo list , when execute app have error message :

i don't understand why first occurence iterated undefined. array hardcoded don't find out why there issue. here code application :

app.module.ts

import { ngmodule }      '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { todonavcomponent }   './app.todo-nav'; import { todolistcomponent }   './app.todo-list'; import { todocomponent }   './app.todo';  @ngmodule({   imports:      [ browsermodule ],   declarations: [ todonavcomponent, todolistcomponent, todocomponent ],   bootstrap:    [ todonavcomponent, todolistcomponent, todocomponent ] }) export class appmodule { } 

app.todo-list.ts

import { component } "@angular/core"; import { todoservice } "./app.service";  @component({     selector: "todo-list",     template: `         <div class="container">             <ul class="list-group">                 <todo *ngfor="let todo of todos" [todo]="todo"></todo>             </ul>         </div>`,     providers: [todoservice] }) export class todolistcomponent {     todos: any[] = [         { name: "do shopping", done: false },         { name: "get gaz car", done: true },         { name: "download last season of game of thrones", done: false }     ];      constructor(private service: todoservice) {         service.todoadded$.subscribe(             todo => {                 this.todos.push(todo);             }         );         service.todoremoved$.subscribe(             todo => {                 this.todos = this.todos.filter(                     (value, index, array) => {                         return todo.name !== value.name;                     }                 );             }         );     } } 

app.todo.ts

import { component, ondestroy, input  } "@angular/core"; import { todoservice } "./app.service"; import { subscription }   'rxjs/subscription';  @component( {     selector: "todo",     template: `         <li class="list-group-item">             <i class="pull-right glyphicon glyphicon-remove" (click)="remove()"></i>             {{todo.name}}         </li>`,     providers: [todoservice] }) export class todocomponent implements ondestroy {     @input() todo;     subscription: subscription;      constructor(private service: todoservice){         this.subscription = service.todoadded$.subscribe(             todo => {                 this.todo = todo;             }         );     }      remove() {         this.service.removetodo(this.todo);     }      ngondestroy() {         this.subscription.unsubscribe();     } } 

here rendering :

what did miss ? don't understand why occures first occurances , not others.

thank !

1. you should include todoservice inside ngmodule providers. if inject todoservice inside todocomponent , todolistcomponent both own copy of service. means if add todoservice inside todocomponent not show inside service injected in todolistcomponent.

2. you should move subscribing services constructor oninit hook. constructors supposed lean. here's angular 2 docs say:

we don't fetch data in component constructor. why? because experienced developers agree components should cheap , safe construct. shouldn't worry new component try contact remote server when created under test or before decide display it. constructors should no more set initial local variables simple values.

when component must start working after creation, can count on angular call ngoninit method jumpstart it. that's heavy initialization logic belongs.

remember directive's data-bound input properties not set until after construction. that's problem if need initialize directive based on properties. they'll have been set when our ngoninit runs.