Angular 2 ngFor第一次發生undefined

我正在嘗試Angular 2，而且我正面臨一個我不明白的奇怪問題。Angular 2 ngFor第一次發生undefined

我做一個簡單的待辦事項列表，當我執行我的應用我有這樣的錯誤消息：

我不明白爲什麼迭代中第一次出現是不確定的。我的數組是硬編碼的，所以我不知道爲什麼會有這個問題。下面是該應用程序的代碼：

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

這裏是渲染：

我錯過了什麼？我不明白爲什麼它只發生在第一次發生而不是其他發生。

謝謝！

來源

2016-09-22 MrGrabazu

此修復這個錯誤在這裏explaned：HTTP：//計算器。com/questions/40291111/angular-2-first-item-in-array-missing-using-ngfor –

您應該在NgModule提供程序中包含TodoService。如果您在TodoComponent和TodoListComponent中注入TodoService，它們都將獲得它們自己的服務副本。這意味着如果向TodoComponent中的TodoService添加內容，它將不會顯示在TodoListComponent中注入的服務內部。
您應該將訂閱從構造函數訂閱到OnInit鉤子。建設者應該是精益。這裏的角2個文檔說什麼：

我們不會在組件構造器獲取數據。爲什麼？因爲有經驗的開發人員同意組件應便宜且安全地構建。我們不應該擔心一個新的組件會在測試時創建或在我們決定顯示它之前嘗試聯繫遠程服務器。構造函數不應僅僅將初始局部變量設置爲簡單值。

當組件在創建後必須立即開始工作時，我們可以指望Angular調用ngOnInit方法來啓動它。這就是重型初始化邏輯所屬的地方。

還要記住，指令的數據綁定輸入屬性在構造之後纔會設置。如果我們需要根據這些屬性初始化指令，那就是個問題。當我們的ngOninit運行時，它們將被設置。

來源

2016-09-23 04:24:24 zecik123

好的，對於服務使用我只是按照文檔，我現在使用OnInit，但是這並沒有解決我的問題第一次迭代未定義的問題。當我在構造函數中訂閱我的服務時，我發現它是因爲服務是通過構造函數的參數給我的，現在我可以在其中找到該服務？ – MrGrabazu

對象。名稱將幫助ü如果u要循環

來源

2016-09-23 05:05:09 junk

這只是創造更多的錯誤。我只想了解爲什麼硬編碼數組的第一項沒有被循環指令正確迭代。 – MrGrabazu

Angular 2 ngFor第一次發生undefined

回答

相關問題