javascript - ngfor let var of vars->遍历整个数组+ 1

我正在学习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>

所以它不起作用，但是为什么呢？

最佳答案

因为您也正在引导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 { }

关于javascript - ngfor let var of vars->遍历整个数组+ 1，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42862547/