Hey Awesome peeps 我正在使用 enlink 主题在我的一个项目中设计聊天，我可以发送消息并获取用户列表，但无法获取对话。
这是我在 chat component.html 中获取对话的部分
<div class="container-fluid p-h-0">
<div class="chat chat-app row">
<div class="chat-list">
<div class="chat-user-tool">
<i nz-icon nzType="search" theme="outline" class="search-icon p-r-10 font-size-20"></i>
<input placeholder="Search...">
</div>
<div class="chat-user-list">
<nz-list [nzDataSource]="chatList" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
<ng-template #item let-item let-index="index">
<a (click)="selectChat(item.userName)" [username]="item.userName">
<nz-list-item class="p-h-25" [ngClass]="{'active': index == chatId}">
<div class="media align-items-center">
<div>
<nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
</div>
<div class="p-l-15">
<h5 class="m-b-0" *ngIf="(accountService.currentUser$ | async)">
{{item.userName}}
<nz-badge *ngIf="(presence.onlineUsers$ | async).includes(item.userName)" nzStatus="success"></nz-badge>
</h5>
<ng-container *ngFor="let item of item.msg; let last = last">
<p *ngIf="last" class="msg-overflow m-b-0 text-muted font-size-13">
{{item.text}}
</p>
</ng-container>
</div>
</div>
</nz-list-item>
</a>
</ng-template>
</nz-list>
</div>
</div>
<div class="chat-content" [ngClass]="{'open': isContentOpen}">
<div class="conversation">
<div class="conversation-wrapper">
<div class="conversation-header justify-content-between">
<ng-container *ngFor="let item of chatList" >
<div class="media align-items-center" *ngIf="chatId == item.userName">
<a [routerLink]="" (click)="closeChatContent()" class="m-r-20 d-md-none d-block text-dark font-size-18 m-t-5" >
<i nz-icon nzType="left-circle" theme="outline"></i>
</a>
<div>
<nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
</div>
<div class="p-l-15">
<h6 class="m-b-0">{{item.userName}}</h6>
<p class="m-b-0 text-muted font-size-13" *ngIf="(presence.onlineUsers$ | async).includes(item.userName)">
<nz-badge nzStatus="success"></nz-badge>
<span>Online</span>
</p>
<p class="m-b-0 text-muted font-size-13" *ngIf="!(presence.onlineUsers$ | async).includes(item.userName)">
<nz-badge nzStatus="default"></nz-badge>
<span>Offline</span>
</p>
</div>
</div>
</ng-container>
<div>
<a class="text-dark font-size-18" [nzDropdownMenu]="chatSetting" nz-dropdown [nzTrigger]="'click'" nzPlacement="bottomRight">
<i nz-icon nzType="setting" theme="outline"></i>
</a>
<nz-dropdown-menu #chatSetting="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item>1st menu item</li>
<li nz-menu-item>2nd menu item</li>
<li nz-menu-item>3rd menu item</li>
</ul>
</nz-dropdown-menu>
</div>
</div>
<div class="conversation-body" #scrollBottom *ngIf="messages.length > 0" >
<ng-container *ngFor="let item of messages">
<div *ngIf="chatId == item.recipientUserName">
<div class="msg" [ngClass]="{'msg-recipient': item.recipientUserName, 'msg-sent': item.senderUserName}" >
<div class="bubble" *ngIf="item.content.length > 1" [ngClass]="{'m-l-50': item.senderUserName.length == 0}">
<div class="bubble-wrapper" [ngClass]="{'p-5': item.senderUserName == 'image'}">
<span *ngIf="item.content">{{item.content}}</span>
<img *ngIf="item.senderUserName == 'image'" [src]="item.content" [alt]="item.content">
<div *ngIf="item.senderUserName == 'file'" class="d-flex align-items-center msg-file">
<i class="font-size-25" nz-icon nzType="file" theme="outline"></i>
<span class="m-l-10 font-weight-semibold text-link pointer">
<u>{{item.content}}</u>
</span>
</div>
</div>
</div>
<div class="font-weight-semibold font-size-12" *ngIf="item.dateRead.length > 1">
{{item.dateRead | date}}
</div>
</div>
</div>
</ng-container>
</div>
<div class="conversation-footer">
<form #messageForm="ngForm" (ngSubmit)="sendMessage()" autocomplete="off">
<input
name="messageContent"
required
[(ngModel)]="messageContent"
class="chat-input" type="text"
placeholder="Type a message..." (keydown.enter)="sendMessage();$event.preventDefault()">
<ul class="list-inline d-flex align-items-center m-b-0">
<li class="list-inline-item">
<a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Emoji">
<i nz-icon nzType="smile" theme="outline"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Attachment">
<i nz-icon nzType="paper-clip" theme="outline"></i>
</a>
</li>
<li class="list-inline-item">
<button class="d-none d-md-block" nz-button nzType="primary" type="submit">
<span class="m-r-10">Send</span>
<p *ngFor="let item of messages">{{item.content}}</p>
<i class="far fa-paper-plane"></i>
</button>
<!-- <a class="text-gray font-size-20 d-md-none d-block" (click)="sendMsg()" nz-tooltip nzTooltipTitle="Attachment">
<i nz-icon nzType="paper-clip" theme="outline"></i>
</a> -->
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
这里是 chat.component.ts 文件，我使用了 html 模板，因为我说发送消息获取用户工作正常，这是获取我遇到的问题的对话机智。
import { Component, AfterViewChecked, ElementRef, ViewChild, OnInit, Input, OnDestroy } from '@angular/core'
import { NgForm } from '@angular/forms';
import { take } from 'rxjs/operators';
import { Message } from 'src/app/shared/interfaces/message';
import { Staff } from 'src/app/shared/interfaces/staff';
import { StaffParams } from 'src/app/shared/interfaces/staff-params';
import { User } from 'src/app/shared/interfaces/user.type';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';
import { MessageService } from 'src/app/shared/services/message.service';
import { PresenceService } from 'src/app/shared/services/presence.service';
import { StaffService } from 'src/app/shared/services/staff.service';
import { Chat } from '../../shared/interfaces/chat.type';
import { AppsService } from '../../shared/services/apps.service';
@Component({
templateUrl: './chat.component.html'
})
export class ChatComponent implements OnInit, AfterViewChecked, OnDestroy {
messageForm!: NgForm;
username!: string;
// messages: Message[] = [];
messages: Message[] = [];
@ViewChild('scrollBottom', { static: true }) private scrollContainer!: ElementRef;
isContentOpen: boolean = false;
chatId!: string;
chatList!: Staff[];
messageList!: Message[];
messageContent!: string;
staffParams!: StaffParams;
staff!: Staff[];
member!: Staff;
user!:User;
constructor( public accountService : AuthenticationService, public messageService: MessageService,
private staffService: StaffService, public presence: PresenceService
) {this.accountService.currentUser$.pipe(take(1)).subscribe(user => this.user = user) }
ngOnInit(){
// this.chatSvc.getChatJSON().subscribe(data => {
// this.chatList = data;
// });
this.chatId = this.user.userName
this.scrollToBottom();
this.loadMembers();
}
loadMembers() {
this.staffService.getStaffforchat().subscribe(response => {
console.log(response);
this.chatList = response;
console.log(response);
})
}
loadMessages(){
this.messageService.getMessageThread(this.member.userName).subscribe(messgaes => {
this.messages = messgaes;
console.log(messgaes);
})
}
ngAfterViewChecked() {
this.scrollToBottom();
}
selectChat(index: string){
this.chatId = index;
this.isContentOpen = true;
// this.messageService.createHubConnection(this.user, this.member?.userName);
this.messageService.createHubConnection(this.user, this.chatId);
console.log(this.messages);
};
closeChatContent() {
this.isContentOpen = false;
this.messageService.stopHubConnection();
}
sendMsg() {
console.log(this.messageContent);
for (let i = 0; i < this.chatList.length; i++) {
if(this.chatId == this.chatList[i].userName && this.messages.length > 1){
this.messageService.sendMessage(this.username, this.messageContent).then(() => {
this.messageForm.reset();
})
}
}
this.msg = '';
}
// for (let i = 0; i < this.chatList.length; i++) {
// if(this.chatId == this.chatList[i].name && this.msg.length > 1){
// this.chatList[i].msg.push(
// {
// avatar: '',
// text: msg,
// from: 'me',
// time: '',
// msgType: 'text'
// }
// )
// }
// }
// this.msg = '';
// }
scrollToBottom(): void {
try {
this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight;
} catch(err) { }
}
sendMessage(){
console.log(this.chatId + this.messageContent);
this.messageService.sendMessage(this.chatId, this.messageContent).then(() => {
this.messageForm.reset();
})
}
ngOnDestroy(): void {
this.messageService.stopHubConnection();
}
}