Angular 如何制作可编辑的角度表？

我试图创建一个可编辑的表格，但它不起作用，我不知道为什么

我做了一些研究，我知道至少有三种选择

在输入字段上使用FormArray和ngIf

使用表单组和动态组件

使用本例中类似的

如果我尝试在本地使用angular4材质表，我会得到这个。同样在本例中，代码所有者使用的是模板驱动的方法，我不知道如何转换为被动的方法。我尝试使用第一个或第二个选项创建自己的表，但没有任何结果

现在，我的代码受第三个选项的启发

---

以下是代码-（带调整）

问题在于如何声明表单组，需要将值设置为表单控件的第一个参数，并且需要为每行创建一个新表单组，我进行了以下编辑：

const editForm = (e) => new FormGroup({
  firstName: new FormControl(e.firstName,Validators.required),
  lastName: new FormControl(e.lastName,Validators.required),
  username: new FormControl(e.username,Validators.required),
  email: new FormControl(e.email,Validators.required),
});
this.ELEMENT_DATA_FROM_BACK.forEach(element => {
  this.ELEMENT_DATA.push({currentData: element, 
                          originalData: element, 
                          editable: false, 
                          validator: editForm(element)});
});

它现在起作用了：

---

要使输入字段可编辑或不可编辑，请将

只读

属性绑定到行的

可编辑

值：

<input [readonly]="!row.editable">

这只是创建“可编辑”表的一个开始-您仍然需要验证更改并在必要时显示错误。您可能应该确认删除操作

---

你的stackblitz不起作用；检查控制台。如果你不打算在你的文章中包含代码，stackblitz至少应该能起作用。你甚至没有在stackblitz中包含你在这篇文章中引用的包。我知道我的示例不起作用，但这就是问题所在，我不知道如何修复它。我试图创建一个运行良好的示例，功能为0，但我得到了负面评价。我的实际代码并没有使用angular4 material table包，它只是从中得到启发。您有一些非常基本的编程/脚本错误。您应该查看控制台输出并解决它们。我将尝试修复错误，但即使我可以消除它，问题也将是一样的：“如何创建可编辑的角度表？”这与我正在寻找的功能非常接近，但仍然存在一些问题。我编辑了一点您的解决方案，更确切地说，我修改了html中第65行和第68行的*ngIf，以显示开始我的错误时的右按钮，代码如下：当我单击编辑按钮时，它必须将行更改为可编辑状态，从中我可以看到您的解决方案。但它也使所有表都可编辑，并且只应生成一行。单击“编辑”按钮后，它必须更改为“批准”按钮。编辑完该行后，必须按“批准”按钮，并且该行必须更改回“编辑”按钮。最后，所有更新的数据都必须存储到一个数组中。在您提供的stackblitz中，每一行始终是一个输入。。。无法在可编辑和不可编辑之间切换。你需要添加一些逻辑，使其从输入切换到基本显示。是的，你是对的，但如果你看看我的主要问题，我说我想出了三种方法来实现这个逻辑，我试图实现所有这些方法，但都不起作用，所以我想在这里寻求一些帮助。如果你看一下这个例子——这也是主要问题中提供的——你会看到代码所有者总是将每一行作为输入。你所说的应该确认删除操作是什么意思？您对表单组、表单生成器、表单数组和表单控件的验证有什么建议，更确切地说，最佳实践是什么？我知道原始数据和当前数据指向同一个对象，但据我了解，原始数据在更新之前，当前数据在更新之后。“确认删除”==询问用户是否确定。这是您的应用程序，因此您必须决定需要什么样的验证。如果您不确定如何开始，请阅读表单设计和验证。如果您想将originalData和currentData分开，则需要进行更改，因为您的设计不是这样工作的——这就是我的观点——它们共享同一个对象。

confirmEditCreate(row) {
  row.editable = false;
  // save form control values to data object
  Object.keys(row.validator.controls).forEach(item => {
    row.currentData[item] = row.validator.controls[item].value;
  });
}

startEdit(row) {
  row.editable = true;
}

cancelOrDelete(row, i) {
  if (row.editable) {
    row.editable = false;
    // cancel - reset form control values to data object
    Object.keys(row.validator.controls).forEach(item => {
      row.validator.controls[item].patchValue(row.currentData[item]);
    });
  }
  else {
    // delete
    this.deleteRow(i);
  }
}