这是我的代码
<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);
}
}
样式不正确,另一个屏幕只显示圆圈,没有任何文字 我找不到任何解决方案有人可以帮忙吗?
这是因为您没有将响应推送到 messages[] 堆栈。
const response = await
this.chatService.sendMessage(event.message).toPromise();
const botReply = response['reply'];
if (botReply) {
setTimeout(() => { this.messages.push(botReply); }, 500);
}