html - 在 Angular 中，是否可以根据您在第一个表格中选择的内容来填写第二个表格？

Question

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

我的表是这样设置的:

<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