각도 2 ng 첫 번째 상황이 정의되지 않았습니다.

Question

저는 2 각도를 시도하고 있습니다. 이해할 수없는 이상한 문제에 직면하고 있습니다.

나는 간단한 할 일 목록을 만들어 내 응용 프로그램을 실행할 때이 오류 메시지가 :

반복를 선두가 정의되지 않은 이유를 이해가 안가. 내 배열이 하드 코드되어 있으므로 왜이 문제가 있는지 알 수 없습니다. 여기 이 응용 프로그램의 코드이다

가

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 app.module.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를 포함해야합니다. TodoComponent와 TodoListComponent 내부에 TodoService를 삽입하면 둘 다 자체 서비스 사본을 얻게됩니다. 즉, TodoComponent 내부의 TodoService에 무언가를 추가하면 TodoListComponent에 삽입 된 서비스 내부에는 표시되지 않습니다.

2. 서비스 가입을 생성자에서 OnInit 후크로 이동해야합니다. 생성자는 마른 사람이라고 생각합니다. 여기에 각이 개 문서가 무슨 말 : 우리는 구성 요소 생성자에서 데이터를 가져 오지 않는

. 왜? 숙련 된 개발자는 구성 요소가 저렴하고 안전해야한다고 동의하기 때문에. 새로운 구성 요소가 테스트를 통해 생성되거나 표시하기로 결정되기 전에 원격 서버에 연결하려고 할 것이라고 걱정하지 않아야합니다. 생성자는 초기 로컬 변수를 단순한 값으로 설정하는 것 이상으로는 안됩니다.

구성 요소가 생성 직후에 작업을 시작해야하는 경우 Angular를 사용하여 ngOnInit 메서드를 호출하여 해당 구성 요소를 점프 스타트 업 할 수 있습니다. 그것은 무거운 초기화 로직이 속한 곳입니다.

지시어의 데이터 바인딩 된 입력 속성은 작성 후에야 설정됩니다. 이러한 속성을 기반으로 지시문을 초기화해야하는 경우 문제가 발생합니다. ngOninit이 실행되면 설정 될 것입니다.

Answer 2

객체이 오류가 여기 explaned됩니다에 대한 유 루프