Как я могу создать вложенный коврик в Angular?

Question

Я новичок в Angular, поэтому, если мой вопрос слишком нюби, пожалуйста, поймите.

У меня есть структура данных примерно такая:

export class Category {

    constructor(
        public id: string,
        public name: string,
        public hasChild: boolean,
        public parent: string,
        public uri: string
    ) { }

}



export class CategoryTreeItem {
    constructor(
      public category: Category,
      public children: CategoryTreeItem[]
    ) {}

    static createCategoryTree(categories: Category[], parent: string): CategoryTreeItem[] {
        const tree: CategoryTreeItem[] = [];
        const mainCats = categories.filter(cat => cat.parent === parent);

        mainCats.forEach(cat => {
            if (cat.hasChild) {
                const subCats = this.getCategoryTree(categories, cat.id);
                tree.push(new CategoryTreeItem(cat, subCats));
            } else {
                tree.push(new CategoryTreeItem(cat, null));
            }
        });

        return tree;
    }
  }

А вот пример вывода:

CategoryTreeItem.createCategoryTree(aCategoryArray, null);
// second parameter is null, since I want to get a full tree. 
// If I want to start the tree from a specific category, I can give it's ID.

// this will return a data like this:

[
    1: CategoryTreeItem {
        category: Category {
            name: A,
            hasChild: true,
            parent: null,
            uri: a
        },
        children: [
            1: CategoryTreeItem {
                category: Category {
                    name: B,
                    hasChild: false,
                    parent: A,
                    uri: b
                }
                children: null // null since B.hasChild = false
            }
        ]
    }, 
    2: CategoryTreeItem {
        category: Category {
            name: C,
            hasChild: false,
            parent: null,
            uri: c
        },
        children: null // null since C.hasChild = false
    }
    3: CategoryTreeItem {
        category: Category {
            name: D,
            hasChild: true,
            parent: null,
            uri: d
        },
        children: [
            1: CategoryTreeItem {
                category: Category {
                    name: E,
                    hasChild: true,
                    parent: D,
                    uri: e
                }
                children: [
                    // more children since E.hasChild = true
                ]
            },
            2: CategoryTreeItem {
                category: Category {
                    name: F,
                    hasChild: false,
                    parent: D,
                    uri: f
                }
                children: null // null since F.hasChild = false
            }
        ]
    }, 
]

Моя проблема в том, что я не имею ни малейшего представления, чтобы создать выбор коврика с этими данными.

Вот что я пытался сделать сейчас:

• Если категория имеет дочернюю категорию, она должна быть <mat-optgroup> и недоступна для выбора.В моей структуре данных продукты не могут ссылаться на категорию, которая имеет дочерние категории.
• Категории без дочерней категории будут <mat-option> помещены в opt-группу его родителей.

Таким образом, я собираюсь выбрать коврик в виде дерева, по крайней мере, это то, чего я ожидаю.

Спасибо.