ngforをvarsの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

あなたも、それを削除して、このようにそれを更新し、あなたの@NgModule

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

でMessageコンポーネントをブートストラップしているので：

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