显示嵌套结构中的选定元素

Question

自从很多小时以来，我一直在努力解决这个问题，你们是我的最后希望！

我想制作一个网页，可以在列表中选择一个项目并显示它，就像这样：

https://i.stack.imgur.com/I0H1r.png

出于以后的目的，我需要将属性 selected 设置为true或false的选定元素分开。因此，从理论上讲，我只需要创建一个选择器，就可以过滤我的结构并返回该属性设置为true的元素。

但是我的结构完全混乱了，我不知道如何正确地对其进行过滤...

export interface BoardList {
    id: number;
    name: string;
    mac: string;
    rcbs: Array<rcbs>;
    type: string;
}

export interface rcbs {
    icbs: Array<icbs>;
    id: number;
    mac: string;
    version: string;
    selected: boolean;
    type: string;
}

export interface icbs {
    head: head;
    id: number;
    mac: string;
    version: string;
    selected: boolean;
    type: string;
}

（图片，如果您希望在检查器中查看：https://i.stack.imgur.com/g1bWE.png）

还有其他事情使我的工作变得非常困难，我需要区分icb和rcb，不能同时选择两者。

tldr：考虑到以前的结构，如何显示具有属性 selected = true 的元素，并且仅显示“ rcbs”或“ icbs”