*ng用于在 Angular 4 中交替显示 2 个数组

Question

我正在 angular 4 中创建一个聊天机器人，我在如何正确显示消息方面遇到了一些困难。输入时，我只是解析发送用于计算的值，同时将其存储到数组 userMessage 中。当我从机器人那里得到响应时，我将其存储到另一个名为 botMessage 的数组中。假设我发送了 3 条消息，输出将这样显示：

UserMessage1
UserMessage2
UserMessage3
BotMessage1
BotMessage2
BotMessage3

我想显示的输出是正常聊天的输出，所以它是：

UserMessage1
BotMessage1
UserMessage2
BotMessage2
UserMessage3
BotMessage3

这是我的html代码

  <ul >
    <li class="bubble user-message" *ngFor = "let message of userMessage ">
      {{message}}
    </li>
    <li class ="bubble bot-message" *ngFor = "let message of botMessage">
      {{message}}
    </li>

  </ul>

有什么建议吗？非常感谢

编辑这是我的打字稿代码：

inputField

//this is called when enter is pressed. apiCall would be the service
onEnter(value: string) {
    this.value = value;
    this.userMessage.push(value);        
    this.apiCall.postValue(value this.output );
    this.botMessage = this.apiCall.getMessages();
    this.chat.displayMessages();
  } //on enter

this is my service

private messages = [];
postValue(value:string, output:any){
  this.http.post('/APIconversation', {"input":value})
  .map(response=>response.json())
  .subscribe(
      data => {
            // Read the result field from the JSON response.
            output = data.text;                


            this.messages.push(output);
     }
  )
}

getMessages(){
    return this.messages;
}

this is where I parse the arrays to the html to be rendered

@Input() userMessage: InputFieldComponent; //gets the array userMessage from the parent (input-field)   
@Input() botMessage: InputFieldComponent; //gets the array botMessage from the parent (input-field)   

displayMessages() {
    this.messages = this.apiCall.getMessages();   
}

Answer 1

更新答案

我建议将您的机器人消息存储在字典中，用户消息的键如下：

botMessage = {};
userMessage = [];

onEnter(value: string) {
    this.userMessage.push(value); 
    var context = this.apiCall.getContext(value); 
    this.apiCall.postValue(value, context, this.output);

    const botMessages = this.apiCall.getMessages();

    // Add all bot messages depending on their user messages
    for(const message of botMessages) {
        this.botMessage[message.userMessageId] = message;
    }
}

暗示，您的机器人消息具有它所依赖的用户消息的信息。使用此结构，您可以像这样轻松访问 html 中的答案：

<ul>
  <li class="bubble" *ngFor="let message of userMessage">
      <div class="user-message>{{ message }}</div>
      <div *ngIf="botMessage[message.id]" class="bot-message>
        {{ botMessage[message.id] }}
      </div>
  </li>
</ul>

另外我很确定，你有一些异步问题，但那是另一章:-)

Answer 2

您可以将这些数组合并为一个，并使用条件根据对象检查机器人和用户属性，您无法使用两个数组实现，

  <div *ngFor="let message of Messages"
        <div *ngIf="message.type === 'User'">
                <user-message-item [message]="message"></sender-message-item>
            </div>
            <div *ngIf="message.type === 'Bot'">
                <bot-message-item [message]="message"></receiver-message-item>
            </div>
 </div>

Answer 3

保持你的数据模型，你可以使用索引：

  <ul *ngFor = "let message of userMessage; let i=index;">
    <li>
      {{ message }}
    </li>
    <li> {{ botMessage[i] }} </li>
  </ul>

然后调整*ngFor 的放置位置。

结果如您所愿。

Link to plunker here

虽然您需要检查长度，因为它们在数组之间可能不同，但我建议您评估您的数据模型。

*ng用于在 Angular 4 中交替显示 2 个数组

*ngFor displaying 2 arrays in alternate way in Angular 4

arrays

ngfor

angular