首页 > 解决方案 > 一个接一个地过滤一个表 - Angular 2++

问题描述

我正在学习 Angular 2++,我想创建 2 个动态表,当单击另一个表的行时可以对其进行过滤。例如。假设我们有下一张桌子:


表格1

ID1     Box Name   Size
1       BOX1       17sqm
2       BOX2       18sqm
3       BOX3       19sqm

表 2

ID1     ID2     Box assets    Pieces
1       a       Chair         3pcs
1       b       Table         2pcs
2       c       TVs           4pcs
2       d       Lawnmower     2pcs
3       e       Vehicle       1pcs

因此,当我单击第一个表的第一行时,它只会显示第二个表的 2 行。如果我单击第二个表的最后一行,它只会显示第一个表的最后一行。

这可能吗?

标签: angulardatatablesangular2-template

解决方案


您需要维护 2 个对象数组以显示 2 个表格。我们需要在表 1 中有一个唯一的 id,这将是表 2 中的外键(关联键)

从上表中,“ID1”是表 1 中的唯一 ID,“ID1”是表 2 中的关联键。当我们单击表 1 中的项目时,使用 ID1 值并对表 2 应用过滤器并在 DOM 中显示结果。


推荐阅读