ngfor讓var的變量 - >遍歷整個數組+ 1

Question

我正在學習angular2，我發現了一些奇怪的東西。 我的郵件列表，我想通過完整列表迭代在其他組件來顯示我的留言：

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'my-message-list', 
    template: `<ul><my-message *ngFor="let message of messages" [message]="message"> </my-message></ul>`, 
}) 
export class ListMessages { 
    messages :Array<Object> 
    constructor(){ 
    this.messages = [] ; 
    //this.messages.push({text:'zerg'}); 
    this.messages.push({text:'lolz1'}); 
    this.messages.push({text:'lolz2'}); 
    this.messages.push({text:'lolz3'}); 
    this.messages.push({text:'lolz4'}); 

    } 

} 
import {Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'my-message', 
    template: `<li >{{ message.text }}</li>`, 
}) 
export class Message { 
    @Input() message:{text:string} 
    constructor(){ 
    } 
    ngOnInit() { 
    if(typeof this.message === 'undefined'){ 
     this.message = {text:'o_O'}; 
    } 

    debugger; 
    } 
} 

與我調試我注意到，在第一次迭代一切都會好的。 我有一個：

<ul><!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]" 
}--><my-message ng-reflect-message="[object Object]" ng-version="2.4.10"><li>lolz1</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz2</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz3</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz4</li></my-message></ul> 

但這種迭代後它會去一個有更多的時間與undefined與O_O

<ul><!--template bindings={ 
     "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]" 
}--><my-message ng-reflect-message="[object Object]" ng-version="2.4.10"><li>o_O</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz2</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz3</li></my-message><my-message ng-reflect-message="[object Object]"><li>lolz4</li></my-message></ul> 

所以它不工作，但爲什麼要更換的第一個項目？

Answer 1

因爲你也是自舉Message組件在@NgModule

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ListMessages,Message ], 
    bootstrap: [ ListMessages,Message ] 
}) 
export class AppModule { } 

刪除它，更新它是這樣的：

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ListMessages,Message ], 
    bootstrap: [ ListMessages] 
}) 
export class AppModule { }