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组件打破第一个渲染循环就像这样：

<cffunction name="rerunProgress" output="false" access="remote" returntype="struct">
    <cfargument name="s1" required="true" type="string" default="">
    <cfargument name="s2" required="true" type="string" default="">
<cfscript>
str = StructNew();
str.message = "Processing Data...";

if (NOT IsDefined("session.status"))
{
    session.status = 0.1;

    deferredJob = defer
    (
        job = function()
        {
            chartUpdate(s1, s2);
        },
        onSuccess = function(result)
        {
            // will receive someResult, so do something with it
        },
        onFailure = function(e)
        {
            writeLog(type="Error", file="News", text="[#ex.type#] #ex.message#");
        }
    );
}
else
if (session.status LT 1.0 AND deferredJob.getStatus() == "Running")
{
    session.status += 0.01;
}
else
{
    str.message = "Done.";
    session.status = 1.0;
}
str.status = session.status;
return str;
</cfscript>
</cffunction>


<cffunction name="defer" output="false" access="remote" returntype="struct">
    <cfargument name="job" required="true" type="struct" default="">
    <cfargument name="onSuccess" required="false" type="struct" default="">
    <cfargument name="onFailure" required="false" type="struct" default="">
    <cfargument name="onError" required="false" type="struct" default="">
    <cfargument name="onTerminate" required="false" type="struct" default="">
    <cfscript>
    var deferThread = "";
    try
    {
        cfthread.status = "Running";
        thread name="deferThread" action="run" attributecollection=arguments
        {
            try
            {
                successData.result = job();
                cfthread.status = "Completed";
                if (structKeyExists(attributes, "onSuccess"))
                    onSuccess(successData);
            }
            catch (any e)
            {
                cfthread.status = "Failed";
                if (structKeyExists(attributes, "onFailure"))
                    onFailure(e);
                else
                    rethrow;
            }
        }
    }
    catch (any e)
    {
        cfthread.status = "Errored";
        if (structKeyExists(attributes, "onError"))
            onError(e);
        else
            rethrow;
    }
    return
    {
        getStatus = function()
        {
            return cfthread.status;
        },
        terminate = function()
        {
            if (cfthread.status == "Running")
            {
                thread name="deferThread" action="terminate";
                cfthread.status = "Terminated";
                if (isDefined("onTerminate"))
                    onTerminate();
            }
        }
    };
</cfscript>
</cffunction>

请尝试以下方法：

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

here is a working simplified version.

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

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

1 个答案: