Angular 2 ngFor第一次出现未定义

Question

我正在尝试 Angular 2，但我遇到了一个我不明白的奇怪问题。

我做了一个简单的待办事项列表，当我执行我的应用程序时，我收到了这条错误消息:

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

应用程序模块.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 { }

应用程序待办事项列表.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;
                    }
                );
            }
        );
    }
}

应用程序.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();
    }
}

这是效果图:

我错过了什么？我不明白为什么它只针对第一次出现而不是其他出现。

谢谢!

Answer 1

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

2. 您应该将服务订阅从构造函数移至 OnInit Hook 。构造函数应该是精益的。 Angular 2 文档是这样说的:

We don't fetch data in a component constructor. Why? Because experienced developers agree that components should be cheap and safe to construct. We shouldn't worry that a new component will try to contact a remote server when created under test or before we decide to display it. Constructors should do no more than set the initial local variables to simple values.

When a component must start working soon after creation, we can count on Angular to call the ngOnInit method to jumpstart it. That's where the heavy initialization logic belongs.

Remember also that a directive's data-bound input properties are not set until after construction. That's a problem if we need to initialize the directive based on those properties. They'll have been set when our ngOninit runs.