Угловое 2 ngFor первое вхождение не определено

Question

Я пытаюсь Угловая 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; 
        } 
       ); 
      } 
     ); 
    } 
} 

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(); 
    } 
} 

Рецензия:

Что я пропустил? Я не понимаю, почему это происходит только для первых событий, а не для других.

Спасибо!

Answer 1

1. Вы должны включить TodoService в поставщиков NgModule. Если вы вводите TodoService внутри TodoComponent и TodoListComponent, они оба получат свою собственную копию сервиса. Это означает, что если вы добавите что-то в TodoService внутри TodoComponent, он не будет отображаться внутри службы, введенной в TodoListComponent.

2. Вы должны перенести подписку на сервисы от конструктора на крючок OnInit. Конструкторы должны быть тощими. Вот что говорят Угловые 2 документы:

Мы не получить данные в компоненте конструктора. Зачем? Потому что опытные разработчики согласны с тем, что компоненты должны быть дешевыми и безопасными для построения. Мы не должны беспокоиться о том, что новый компонент попытается связаться с удаленным сервером при его создании под тестированием или до того, как мы решим его отобразить. Конструкторы должны делать не более, чем устанавливать начальные локальные переменные в простые значения.

Когда компонент должен начать работать вскоре после создания, мы можем рассчитывать на Угловое, чтобы вызвать метод ngOnInit, чтобы запустить его. В этом и заключается тяжелая логика инициализации.

Помните также, что свойства входных данных, привязанные к директиве, не задаются до завершения. Это проблема, если нам нужно инициализировать директиву, основанную на этих свойствах. Они будут установлены, когда будет запущен наш ngOninit.

Answer 2

Объект .name поможет U, если и хотят, чтобы петля