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 { }

ngfor let var of vars - ＆gt;遍历完整数组+ 1

1 个答案: