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

Question

我刚开始学习 Angular4，遇到了一个我无法解释的问题。

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

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

为此，我在 app.chatComponent 中定义了一个消息数组 msgArray，并通过 à *ngFor 指令 遍历消息。对于每条消息，我想显示一个子组件 app.messageComponent。

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

为什么？

这是我的 app.module.ts

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

这是我的主要组件： app.chatComponent.ts

import { Component } from '@angular/core';
import { MsgComponent } from './app.msgComponent';
import { Msg } from './app.msgModel';

var msgArray: Msg[] = [
  { id: '11', content: 'msg0' },
  { id: '11', content: 'msg1' },
  { id: '12', content: 'msg2' },
  { id: '13', content: 'msg3' },
  { id: '14', content: 'msg4' },
  { id: '15', content: 'msg5' },
  { id: '16', content: 'msg6' },
  { id: '17', content: 'msg7' },
  { id: '18', content: 'msg8' },
  { id: '19', content: 'msg9' },
  { id: '20', content: 'msg10' }
];

@Component({
  selector: 'chat-component',
  templateUrl: './app.chatComponent.html',
  styleUrls: ['./app.chatComponent.css']
})
export class ChatComponent {
    messages: Msg[] = msgArray;
    msg: Msg = new Msg();
}

app.chatComponent.html

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

这是我的子组件：app.msgComponent.ts

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

app.msgComponent.html

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

See demo on plunker

Answer 1

好的，问题是您正在引导 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 { }

here is a working simplified version.

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