Angular：使用自定义html创建CRUD可编辑表

Question

我试图创建一个支持CRUD操作的可编辑表，而对于编辑/删除/创建，我将打开一个弹出对话框来实现这些操作。对我来说重要的是：

• 我想完全自定义表格及其行（HTML和CSS）
• 我想实现一个可用于CRUD操作的对话框功能

现在我有一些混合解决方案（我使用ng-grid for modals，它允许我控制对话框html，但表本身不能真正改变，因为我看到它）。

无论如何，它只是限制了我，如果有经验的人可以形容我对如何实施这样的要求以及我应该使用什么库的想法，我会很高兴的？

Answer 1

我会建议你为初学者“保持简单愚蠢”。重复几个trs和tds并让角度保持模型与表同步是非常简单的。

这个问题非常相似（接受的答案有一个基本依赖设置建议）：

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

Answer 2

找到了一种灵活的方式来使用它

window.addEventListener('keyup', (event) => {
  const el = event.srcElement as HTMLElement;
  if (el.contentEditable) {
    const id = el.id;
    console.log('Value Changed!', el.innerText);
    this.workingApprovalForm[id] = el.innerText;
  }
});

这将使您的自定义表中的任何div成为“contentEditable”并为对象赋值。从那里，您可以将其保存到您的API或数据库。