I have issue with chat UI component style it show as follow
这里是我的代码
<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);
}
}
风格是不对的,其他屏幕只显示没有任何文字的圆圈,我无法找到任何解决方案,任何人都可以帮助这个?
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(53条)