ngfor let var of vars->遍歷整個數組+ 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引導Message組件

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

刪除並更新，如下所示：

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