Angular中如何匹配数组ID并将对应元素设为null

问题描述 #

我有一个名为responseData的数组，用于展示页面上的可用卡片选项，数组结构如下：

public responseData = [
{
  id: 1399,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO ',
  validade: '2029-05-01',
},
{
  id: 13932,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO  L',
  validade: '2029-05-01',
},
{
  id: 139429,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO SILVA DE L',
  validade: '2029-05-01',
},
];

当用户点击卡片时，会将点击的卡片对象存入cardDelete变量：

this.cardDelete = card;

需要实现：匹配cardDelete的ID，将responseData中对应ID的元素设为null。

实现方案 #

方法一：直接修改原数组（通过索引定位） #

通过findIndex找到目标元素的索引，确认存在后将该位置设为null：

// 查找匹配ID的元素索引
const targetIndex = this.responseData.findIndex(item => item.id === this.cardDelete.id);
// 索引有效时修改元素
if (targetIndex !== -1) {
  this.responseData[targetIndex] = null;
}

方法二：生成新数组（适合不可变数据场景） #

使用map方法遍历数组，替换匹配ID的元素为null，其余元素保持不变：

this.responseData = this.responseData.map(item => 
  item.id === this.cardDelete.id ? null : item
);

说明 #

• findIndex会返回第一个匹配ID的元素索引，未找到则返回-1，判断索引有效性可避免数组越界报错。
• map方法返回新数组，不会修改原数组，更适合Angular等依赖变更检测的框架场景。

内容的提问来源于stack exchange，提问作者Leonardo Lima