Javascript 如何根据新旧数据筛选数据

我是新来的。我创建了一个内联可编辑表，可以内联执行CRUD操作。 我正在创建的行，我用起始键

“a”

创建了它的id，如下所示

 addNew(): void {
    this.data.push({
      id: "a" + this.newFieldCounter++,
      isEditable: true,
    });
  }

但是用户单击add按钮，当他想要取消操作时，应该删除新的可编辑行，因为我这样写：

cancel(data): void {
    this.data = this.data.filter((x) => !(x.id === data.id));
    data.isEditable = !data.isEditable;
}

对于新行，“取消”按钮工作正常，但当我单击现有记录的“编辑”按钮和单击“取消”按钮时，该现有记录也将从表中删除：(

---

有什么办法吗？

最简单的解决方案是，给新条目一个标志，表明它们是新的。因此，取消编辑时，只会过滤掉那些新条目

因此，您可以添加

（blur）=“removeNewFlag（data）”

或类似的内容，以删除提交输入时的标志

您可能会遇到问题，因为单击“取消”按钮也会触发模糊事件。因此，您可以延迟

removeNewFlag

方法，也可以更改代码以仅使用按钮提交输入（如Messenger中的纸飞机）

看看这个

你能试试这个吗

addNew(): void {
    this.data.push({
      id: "a" + this.newFieldCounter++,
      isEditable: true,
      isNew: true  //for old entries it will be false or undefined
    });
  }

cancel(data): void {
    this.data = this.data.filter((x) => x.id !== data.id && !x.isNew);
    data.isEditable = !data.isEditable;
}

已更新 将旧数据存储在辅助对象中，并使用变量来确定是新数据还是非新数据

onEdit(data)
{
   this.isNew=false;
   this.oldData={...data} //make a copy using spread operator
   ...
}
onAdd()
{
   this.isNew=true;
   ...
}

在“取消”中，可以传递数据的索引

<i .... (click)="cancel(tableData,i)"></i>

及

取消（数据、索引）
{
if（this.isNew）/！（x.id==data.id））；
其他的
this.tableData[索引]={…this.oldData}
data.isEditable=！data.isEditable；
}

您可以共享您的html文件吗？在我看来这没问题，也许html文件有问题。@FilipCulig添加了html文件…请检查无法理解任何内容我添加了stackblitz，以便向您展示我所说的内容。由于您没有提交或保存对项目所做更改的机制，因此无法真正区分“新”和“旧”项目。因此，我添加了一个保存/提交功能。这有什么新功能？很抱歉，我与Kshiti添加新属性的响应相混淆：添加数据时新建。“理想”是使用一个简单的变量，在“编辑”中将变量设置为false，在“添加”中将变量设置为true，在“取消”中“检查”变量的值（并忽略if）。我只是更新了anser（很抱歉混淆了），没有工作，删除了现有的数据

cancel(data,index)
{
  if (this.isNew) //<--use the variable
    this.data = this.data.filter((x) => !(x.id === data.id));
  else
    this.tableData[index] ={...this.oldData}

  data.isEditable = !data.isEditable;
}