在angular中查找项目索引

Question

我有delete函数，它将发出套接字。io然后套接字更新其他方项目列表并删除此项目(替换静态文本)问题是，当我收到套接字数据时，我无法找到匹配项目来更新它。

<标题>逻辑

1. 用户1删除消息
2. 用户2获取(静态文本)，如this message was deleted

流动

1. User 1delete message (works)
2. User 1(works)消息被删除
3. socket.io得到这个删除(工作)的通知
4. User 2从socket.io(works)获取删除的消息数据
5. socket.io查找并替换已删除的消息(不工作)

代码User 1 delete message

async presentPopover(ev: any, indexOfelement: any, own: any) {
// send clicked item data to popover (popover will delete it and send back results)
const popover = await this.popoverController.create({
component: MessagesComponent,
cssClass: 'my-custom-class',
event: ev,
componentProps: { id: ev, index: indexOfelement, from: 'pchat', own },
translucent: true
});
// returned results from popover
popover.onDidDismiss().then((result: object) => {
console.log('res2021 1: ', result);
console.log('this.room.messages 2: ', this.room.messages);
if (result['data']) {
this.socket.emit('messageDelete', { message: result['data'] }); // data is "id: 187, index: 15"
this.room.messages.splice(result['data'].index, 1); // remove message from user 1 list (prefered if replace the text as well here instead of removing it)
}
});
return await popover.present();
}

(popover)

// delete message (in popover)
Pdelete(event) {
this.privateChatsService.deleteMessage(this.navParams.get('id')).subscribe((res: any) => {
this.popoverController.dismiss({ id: this.navParams.get('id'), index: this.navParams.get('index') }); //send back data
});
}

User 2 gets update about deleted message

ngOnInit() {
// remove deleted message
this.socket.fromEvent('messDel').subscribe((message: any) => {
console.log('from del emit in private chat: ', message); // data is "id: 187, index: 15"
this.room.messages.splice(message.msg.message.index, 1); // make changes in deleted item ("index" cannot be found)
});
// end of socket.io
}

注意:问题是在this.room.messages.splice(message.msg.message.index, 1);代码中，套接字无法根据索引找到正确的项目，其余部分工作正常。

Answer 1

已解决

关于

this.room.messages.splice(结果("数据")。指数(1);//从用户1列表中删除消息(首选，如果在这里也替换文本，而不是删除它)

我已经添加了额外的对象到我的响应从弹出窗口更新我的列表项，而不是删除它们

Pdelete(event) {
this.privateChatsService.deleteMessage(this.navParams.get('id')).subscribe((res: any) => {
this.popoverController.dismiss({ id: this.navParams.get('id'), index: this.navParams.get('index'), deleted_at: res.data.deleted_at });
});
}

添加了deleted_at，因为这是我在HTML中检查的，以便显示占位符文本。

然后为了找到正确的项目，我将套接字侦听器更改为:

this.socket.fromEvent('messDel').subscribe((message: any) => {
this.room.messages.find(item => item.id == message.msg.message.id).deleted_at = message.msg.message.deleted_at;
});

我根据弹出窗口响应id找到id项，然后我更新deleted_at值，以便它可以显示占位符文本。

对于删除此消息的User 1，我做了与套接字侦听器相同的代码，因此消息不会从他/她的列表中删除，而是显示占位符文本

// returned results from popover
popover.onDidDismiss().then((result: object) => {
if (result['data']) {
this.socket.emit('messageDelete', { message: result['data'] });
this.room.messages.find(item => item.id == result['data'].id).deleted_at = result['data'].deleted_at;
}
});