如何使用angular4在ngFor循环中显示嵌套的@component？

我刚刚开始学习Angular4，我面临一个无法解释的问题

我现在尝试构建两个组件：

我的主要组件是chatComponent它应该显示子组件的列表msgComponent

为此，我在app.chatComponent中定义了一个messagemsgArray数组，并通过a*ngFor指令对消息进行迭代。对于每条消息，我想显示一个子组件app.messageComponent

到目前为止，除了msgArray中的第一条消息从未显示外，一切都很正常

为什么?

这是我的app.module.ts

以下是我的主要内容： app.chatComponent.ts

app.chatComponent.html

app.msgComponent.html

{{msg}

---

好的，问题是您正在引导msg组件打破第一个渲染循环，就像这样：

import { BrowserModule } from '@angular/platform-browser';
import { NgForOf  } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgModel, FormsModule }   from '@angular/forms';


import { ChatComponent } from './app.chatComponent';
import { MsgComponent } from './app.msgComponent';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule 
  ],
  declarations: [
    ChatComponent,
    MsgComponent
  ],
  providers: [],
  bootstrap: [ChatComponent, MsgComponent]
})
export class AppModule { }

试试这个：

import { BrowserModule } from '@angular/platform-browser';
import { NgForOf  } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgModel } from '@angular/forms';

import { ChatComponent } from 'src/app.chatComponent';
import { MsgComponent } from 'src/app.msgComponent';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule 
  ],
  declarations: [
    ChatComponent,
    MsgComponent
  ],
  providers: [],
  bootstrap: [ChatComponent]
})
export class AppModule { }

---

您不需要引导所有组件，只需要将它们放在声明中。

app.chatComponent.html中有一个输入错误。应该是“let msg of messages”@rjustin你是对的抱歉我更正了这是一个副本/过去的错误。但这并不能解释我的问题：）你能用你拥有的东西制作一个plunker并让它运行吗？@rjustin这是plunker上的演示，因为你可以看到我的第一条消息的内容没有显示出来。（实际上，第一条消息的值为null）这是一个非常奇怪的问题。我已经看了20分钟了，我很困惑。它与@Input msg为null有关。如果您设置它将显示在第一项中。这不是预期的行为。我会继续摆弄它。为了这个答案，它工作得很好。您将如何快速解释此“引导”指令的作用？@jmchey如果此答案对您有效，请将其标记为接受，以便将来帮助他人。这是有关引导的文档链接我正在做对不起，我是新来的：）

<div>
    <ul class="messages">
        <msg-component *ngFor="let msg of messages" [msg]="msg.content"></msg-component>
    </ul>
</div>
<input [(ngModel)]="msg.content">

import { Component, Input } from '@angular/core';
import { Msg } from './app.msgModel';
@Component({
  selector: 'msg-component',
  templateUrl: './app.msgComponent.html',
  styleUrls: ['./app.msgComponent.css']
})
export class MsgComponent {
    @Input() msg: Msg;
}

<li>{{msg}}</li>

import { BrowserModule } from '@angular/platform-browser';
import { NgForOf  } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgModel, FormsModule }   from '@angular/forms';


import { ChatComponent } from './app.chatComponent';
import { MsgComponent } from './app.msgComponent';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule 
  ],
  declarations: [
    ChatComponent,
    MsgComponent
  ],
  providers: [],
  bootstrap: [ChatComponent, MsgComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgForOf  } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgModel } from '@angular/forms';

import { ChatComponent } from 'src/app.chatComponent';
import { MsgComponent } from 'src/app.msgComponent';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule 
  ],
  declarations: [
    ChatComponent,
    MsgComponent
  ],
  providers: [],
  bootstrap: [ChatComponent]
})
export class AppModule { }