带有 Firebase 的数据网格清晰度组件

Question

我有一个数据网格，它填充来自 Firebase Cloudstore 的数据（根据 Firebase 的 lastUpdated 日期排序），当我编辑行时，我有模式对话框，我可以在其中编辑信息，当保存条目时，我设置了 lastUpdated到系统日期。编辑工作正常（并且时间戳已更新）但它从 table 中选择了错误的行。在 table 中，我有一列是来自 Firebase 的 documentId。为了验证它是否选择了错误的 documentId，我然后控制台记录了传递给编辑方法的 documentId，它与我在视图中选择进行编辑的行中的 documentId 不同。我的代码与下面的代码完全一样（摘自清晰文档）。我做错了什么？

<clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
    <clr-dg-action-overflow>
        <button class="action-item" (click)="onEdit(user)">Edit</button>
        <button class="action-item" (click)="onDelete(user)">Delete</button>
    </clr-dg-action-overflow>
    <-- ... -->
</clr-dg-row>

Answer 1

这里有一些结构问题。

首先，模式应该是顶级的，而不是在数据网格内部。基本上，它会导致显示最后定义的模态（具有相同的 clrModalOpen 绑定），而不会显示其他模态。

其次，单击记录不会传递或设置有关您选择的行的任何状态。因此您的表单不知道正在编辑哪一行并且您的模型未定义。

你的模态输出 connection.id 的原因是你将它定义为数据网格行本身的内联，其中存在 connection 局部变量。但是，您必须将它传递给模态，因为它必须存在于数据网格本身之外。

见https://stackblitz.com/edit/angular-azbaxr?file=src%2Fapp%2Fapp.component.html

带有 Firebase 的数据网格清晰度组件

Datagrid clarity component with Firebase

firebase

vmware-clarity

google-cloud-firestore