【问题标题】：Find item index in angular以角度查找项目索引
【发布时间】：2021-04-28 20:17:15
【问题描述】：

我有删除功能，它会发出 socket.io 然后套接字更新其他方项目列表并删除这个项目（替换静态文本）问题是当我收到套接字数据时我找不到匹配项目来更新它。

逻辑

用户 1 删除消息
用户 2 获取（静态文本），例如 this message was deleted

流程

User 1删除消息（有效）
User 1 的消息被删除（有效）
socket.io 收到此删除的通知（有效）
User 2 从socket.io 获取已删除的消息数据（有效）
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); 代码中，socket 无法根据索引找到正确的项目，其余工作正常。

【问题讨论】：

您是否收到任何错误消息？
@RachidO 除了index 是未定义的编号。
您将ngOninit 标记为async，其中can be problematic。此外，您将this.socket.fromEvent('messDel') 的回调作为异步，但内部没有做任何等待。你需要包装你的函数/逻辑来实际使用 Promise 来工作。
@Phix 你说得对，这个异步是针对旧代码的，当我更改它们时我忘了删除异步，谢谢提醒。

标签： javascript angular typescript

【解决方案1】：

已解决

关于

this.room.messages.splice(result['data'].index, 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;
      }
});

【讨论】：