问题描述
嗨，我正在尝试制作多个聊天窗口（例如邮件窗口中的视频群聊）。为此，我创建了一个组件调用 live-session，并为聊天 UI 创建了另一个组件调用 chat-window。
我在循环中调用了聊天窗口组件，一切正常，我可以在他们自己的窗口中看到所有聊天内容。但是当我尝试附加一些文件时，它总是将这些文件推送到零索引组件中。
这是我的代码
实时会话（父组件）
<div class="card">
<div class="card-body">
<div class="email-list">
<ul class="list-unstyled">
<ng-container *ngIf="active_student_list.length > 0; else nodata">
<ng-container *ngFor="let student of active_student_list">
<li
*ngIf="selected_batch._id === student.batch_id"
(click)="check_slot(student)"
style="cursor: pointer"
>
<a class="javascript:void(0)">
<div class="email-list-item">
<div class="email-author">
<img
src="../../assets/images/avatars/profile-image-1.png"
alt=""
/>
<span class="author-name">
{{ student.student_name }}
</span>
<span
class="email-date"
*ngIf="student.admin_unread_count > 0"
>
{{ student.admin_unread_count }}
</span>
</div>
</div>
</a>
</li>
</ng-container>
</ng-container>
<li>
<ng-template #nodata>
<h4 class="h4 warnning">
Please Select A batch from the dropdown above
</h4>
</ng-template>
</li>
</ul>
</div>
</div>
</div>
//calling component in a loop
<div class="col-sm-12 col-md-9">
<div class="row">
<div
class="col-12 col-md-4 p-0 p-2"
*ngFor="let stu of slots; let i = index"
>
<app-chat-window
[chat]="stu"
[index]="i"
(onMessageSend)="newMessageSend($event)"
(onAttachment)="newAttachment($event)"
></app-chat-window>
</div>
</div>
</div>
实时 session.ts
slots: any[] = [];
// after student selected get their chat
check_slot(student) {
this.temp_student = student;
if (this.slots.length <= 2) {
this.get_selected_student_chat(student);
} else {
this.findindex(student) == -1 ? (this.display = true) : '';
}
}
get_selected_student_chat(student) {
this.spinner = true;
// joining room
if (student.sme_id === localStorage.getItem('uid')) {
this.live_session_chat_service.join_room({
room_id: student.student_id + student.batch_id,});
}
this.chat_service.get_selected_studentChat(student._id).subscribe(
(res: any) => {
const response = res.data;
this.slots.push({
chat: student,message: response.message,files: [],});
this.spinner = false;
},(error) => this.error_handler(error)
);
}
async newMessageSend(data) {
console.log(data);}
//getting zero index always
newAttachment(event) {
console.log(event);
// this.slots[event.index].files = event.files;
// console.log(this.slots[event.index]);
}
chat-window.html
<!-- chat container -->
<div class="" *ngIf="!spinner; else showspinner">
<div class="card">
<div class="card-body-custom">
<ng-container>
<div
class="chat-header d-flex justify-content-between align-items-center"
>
<h3 class="h3">
{{ chat.chat.student_name }}
</h3>
<div class="control d-flex" *ngIf="chat.chat.sme_id == admin_id">
<!-- <div class="batch_list">
<p-dropdown
#transfer_admin_id
[options]="transfer_admin"
placeholder="Transfer Chat"
(onChange)="transfer_chat(transfer_admin_id)"
optionLabel="name"
optionValue="_id"
[style]="{ minWidth: '100%','border-radius': '10px' }"
>
<ng-template let-group pTemplate="group">
<div class="p-d-flex p-ai-center">
<span>{{ group.label }}</span>
</div>
</ng-template>
</p-dropdown>
</div>
<div class="control">
<button
type="button"
class="btn btn-danger"
(click)="end_chat()"
>
End Chat
</button>
</div> -->
</div>
</div>
<div class="chat-body px-2">
<div class="d-flex">
<button
pButton
pRipple
pTooltip="Load more"
type="button"
icon="pi pi-cloud-download"
class="p-button-rounded p-button-outlined m-auto"
></button>
<!-- [disabled]="!selected_student_chat_message"
(click)="load_more()" -->
</div>
<div class="post-comments d-flex flex-column">
<ng-container *ngIf="chat.message">
<div
class="post-comm"
*ngFor="let message of chat.message"
[ngClass]="
message.sender_type === 'student'
? 'align-self-start'
: 'align-self-end'
"
>
<img
src="../../assets/images/avatars/profile-image-2.png"
class="comment-img"
alt=""
/>
<div class="comment-container pb-2">
<span class="comment-author">
{{ message.sender_name }}
<small class="comment-date" *ngIf="message.created_at">
{{ message.created_at | amDateFormat: "hh:mmA" }}</small
>
</span>
</div>
<ng-container *ngIf="message.text_message">
<p-divider></p-divider>
<span class="comment-text" [innerHTML]="message.text_message">
</span>
</ng-container>
<div class="attachment" *ngIf="message.attachment?.length > 0">
<p-divider></p-divider>
<small>Attachments</small>
<ul
class="d-flex flex-wrap"
style="list-style: none; margin: 0; padding: 0"
>
<li
class="mr-2"
*ngFor="let file of message.attachment; index as i"
>
<a
[href]="file"
target="_blank"
[ngClass]="{
'text-white': message.sender_type === 'student'
}"
>file{{ i }}</a
>
</li>
</ul>
</div>
</div>
</ng-container>
</div>
</div>
<!-- chat form -->
<div class="chat-new-footer">
<ng-container *ngIf="chat.chat.sme_id; else startchat">
<div class="footer-Box col-12 mt-3 mt-md-4 p-0">
<div class="textarea">
<textarea name="" id="" cols="30" rows="2" #textarea></textarea>
</div>
<div class="function-button d-flex">
<div class="file">
<input
type="file"
multiple
(change)="attchment($event,index)"
name="file"
id="file"
/>
<label for="file" title="select files">
<span><i class="fas fa-paperclip"></i></span>
<span *ngIf="chat.files.length > 0">
{{ chat.files.length }}
</span>
</label>
</div>
<div class="button">
<button
class="btn btn-primary"
*ngIf="!message_sending; else wait"
(click)="send_message(textarea)"
>
<!-- *ngIf="!message_sending; else wait"
[disabled]="!text && files.length == 0"
(click)="send_message(textarea)" -->
Send
</button>
<ng-template #wait>
<button
pButton
pRipple
type="button"
icon="pi pi-spin pi-spinner"
class="p-button-rounded"
disabled="true"
></button>
</ng-template>
</div>
</div>
</div>
</ng-container>
<ng-template #startchat></ng-template>
</div>
</ng-container>
</div>
</div>
</div>
<audio src="../../../assets/Sound/pop.mp3" #sound></audio>
<ng-template #showspinner>
<div class="spinner">
<app-spinner></app-spinner>
</div>
</ng-template>
chat-window.ts
@input() chat: any;
@input() index: any;
@Output() onMessageSend: EventEmitter<any> = new EventEmitter();
@Output() onAttachment: EventEmitter<any> = new EventEmitter();
spinner: boolean = true;
// attachment
attchment(event) {
this.files = [];
for (let i = 0; i < event.target.files.length; i++) {
this.files.push(event.target.files[i]);
}
console.log(event);
this.onAttachment.emit({ event: event,index: this.index });
}
async send_message(message) {
console.log(this.index);
// if (message.value == '' && this.files.length == 0) {
// return;
// }
// this.message_sending = true;
const message_obj = {
text_message: message.value,sme_id: localStorage.getItem('uid'),sender_name: this.admin.name,sender_type: 'admin',attachment: [],created_at: new Date(),};
this.onMessageSend.emit({ message: message_obj,index: this.index });
}
我不知道哪里出错了，我只需要选择文件的那个组件的索引。
**用户界面**
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）