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>置于其父类别的“选择组”中。

这样，我将有一个树状的垫选择，至少这是我期望的。

谢谢。

如何在Angular中创建嵌套的mat-select？

0 个答案: