星云聊天UI组件

Question

我对聊天 UI 组件样式有疑问，如下所示

这是我的代码

<nb-layout>
    <nb-layout-column>
        <nb-chat title="Chat APP">
            <nb-chat-message *ngFor="let msg of messages"
                             [type]="msg.type"
                             [message]="msg.text"
                             [reply]="msg.reply"
                             [sender]="msg.name"
                             [date]="msg.date"
                             [quote]="msg.quote"
                             [avatar]="msg.avatar">
            </nb-chat-message>
        
            <nb-chat-form (send)="sendMessage($event)" [dropFiles]="false">
            </nb-chat-form>
        </nb-chat>
    </nb-layout-column> </nb-layout>

chat-room.component.ts 代码

import { Component, OnInit } from '@angular/core';
import { ChatService } from 'src/app/Services/chat.service';

@Component({
  selector: 'app-chat-room',
  templateUrl: './chat-room.component.html',
  styleUrls: ['./chat-room.component.scss'],
})
export class ChatRoomComponent implements OnInit {
  messages: any[] = [];

  constructor(protected chatService: ChatService) {
    this.chatService.getMessage().subscribe((data: any) => {
      console.log(data);
      this.messages.push(data);
    });
  }

  ngOnInit(): void {}

  sendMessage(event: any) {
    var payload = {
      text: event.message,
      date: new Date(),
      reply: true,
      type: 'text',
      name: 'Jonh Doe',
      avatar: 'https://i.gifer.com/no.gif',
    };
    this.messages.push(payload);

    this.chatService.sendMessage(event.message);
  }
}

样式不正确，另一个屏幕只显示圆圈，没有任何文字 我找不到任何解决方案有人可以帮忙吗？

Answer 1

这是因为您没有将响应推送到 messages[] 堆栈。

const response = await 
this.chatService.sendMessage(event.message).toPromise();
const botReply = response['reply'];
if (botReply) {
   setTimeout(() => { this.messages.push(botReply); }, 500);
}