Angular 第一次出现的角度2未定义

我正在尝试Angular 2，我面临着一个奇怪的问题，我不明白

我制作了一个简单的待办事项列表，当我执行我的应用程序时，我会收到以下错误消息：

我不明白为什么迭代的第一次出现是未定义的。我的数组是硬编码的，所以我不知道为什么会出现这个问题。 以下是此应用程序的代码：

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TodoNavComponent }   from './app.todo-nav';
import { TodoListComponent }   from './app.todo-list';
import { TodoComponent }   from './app.todo';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ TodoNavComponent, TodoListComponent, TodoComponent ],
  bootstrap:    [ TodoNavComponent, TodoListComponent, TodoComponent ]
})
export class AppModule { }

app.todo-list.ts

import { Component } from "@angular/core";
import { TodoService } from "./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 some gaz for my 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;
                    }
                );
            }
        );
    }
}

从“@angular/core”导入{Component}；
从“/app.service”导入{TodoService}；
@组成部分({
选择器：“待办事项列表”，
模板：`


`,
提供者：[TodoService]
})
将类导出到olistComponent{
待办事项：任何[]=[
{name:“购物”，done:false}，
{name:“给我的车加油”，完成：真的}，
{name:“下载上一季的权力游戏”，完成：false}
];
构造函数（专用服务：TodoService）{
服务。ToLoaded$。订阅(
todo=>{
这个.todo.push（todo）；
}
);
service.todoRemoved$。订阅(
todo=>{
this.todos=this.todos.filter(
（值、索引、数组）=>{
返回todo.name！==value.name；
}
);
}
);
}
}

app.todo.ts

import { Component, OnDestroy, Input  } from "@angular/core";
import { TodoService } from "./app.service";
import { Subscription }   from '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();
    }
}

import{Component，OnDestroy，Input}来自“@angular/core”；
从“/app.service”导入{TodoService}；
从'rxjs/Subscription'导入{Subscription}；
@组件（{
选择器：“待办事项”，
模板：`

{{todo.name}
`，
提供者：[TodoService]
})
导出类TodoComponent实现OnDestroy{
@输入（）todo；
认购：认购；
构造函数（专用服务：TodoService）{
this.subscription=service.ToLoaded$.subscripte(
todo=>{
this.todo=todo；
}
);
}
删除（）{
this.service.removeTodo（this.todo）；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
}

以下是渲染：

我错过了什么？ 我不明白为什么它只是第一次发生而不是其他的

谢谢大家!

您应该在NgModule提供程序中包含TodoService。如果将TodoService注入TodoComponent和TodoListComponent中，它们都将获得自己的服务副本。这意味着，如果在TodoComponent中向TodoService添加了某些内容，则它将不会显示在TodoListComponent中注入的服务中

您应该将服务订阅从构造函数移动到OnInit钩子。建设者应该是精益的。以下是Angular 2文档的内容：

我们不在组件构造函数中获取数据。为什么？因为有经验的开发人员都认为组件应该便宜且安全。我们不必担心在测试中创建新组件时，或者在决定显示它之前，新组件会尝试联系远程服务器。构造函数只需将初始局部变量设置为简单值

当一个组件必须在创建后很快开始工作时，我们可以依靠Angular调用ngOnInit方法来启动它。这就是繁重的初始化逻辑所在

还要记住，指令的数据绑定输入属性在构造之后才设置。如果我们需要基于这些属性初始化指令，那么这就是一个问题。当我们的ngOninit运行时，它们将被设置。

---

Object？.name将帮助您循环

Ok，对于使用的服务，我只是按照文档进行操作，我现在使用的是OnInit，但这并不能解决第一次迭代时未定义的问题。当我在构造函数中订阅我的服务时，我找到了它，因为服务是通过构造函数的参数提供给我的，现在我可以在哪里找到服务？这只会产生更多错误。我只是想了解为什么loop指令没有正确迭代硬编码数组的第一项。这里解释了此错误的修复方法：