在 Angular 中，有没有办法根据您在第一个表中选择的内容填写第二个表格?

Question

我有两个表。第一个表是组列表。这些组中的每一个都有附加的会话，这是第二个表将要填写的内容。我想发生的是，当用户单击第一个表中的组时，它旁边的第二个表将填充与该组关联的正确会话。

以下是我的表格的设置方式：

<div>
<h1>Manage Workflows</h1>
</div>
<div class="table-responsive">
<table class="table" id = "groups">
<thead>
<tr>
<th scope="col">Group</th>
</tr>
</thead>
<tbody>
<tr>                  
</tr>
</tbody>
</table>
<table class="table" id = "sessions">
<thead>
<tr>
<th scope="col">Session</th>
<th scope="col" id = "trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>

Answer 1

是的。您可以通过单击第一个表的行在第二个表中显示详细信息。

向行添加点击事件，并根据行 ID 筛选数据。

public onRowClick(id: number): void {
this.tableTwo= this.rows.filter(row => row.id === id);
}

解决方案：https://stackblitz.com/edit/angular-table-add-record-dshxfy?file=src/app/app.component.html