angular - 如何使用 typescript 和 Angular 在动态下拉列表中创建 "submenu"？

Question

这就是我创建动态下拉列表的方法:

.html

<label> Move to </label>
    <select [(ngModel)] = "mSelectedCategoryNameMoveTo" 
            (click)     = "onMoveToSelected()" 
            [disabled]  = "mflagDisableMoveTo" >

        <option *ngFor = "let category of categories" [ngValue] = "category.name" >
            {{category.name}}
        </option>       

    </select>

这里的列表类别来自.ts文件。所有变量和函数都在相应的.ts文件中定义。

category结构.ts如下:

export interface CategoryStructure
{
    id:          number
    name:        string
    description: string 
    blogIds:     number[]
}

在这里创建“子菜单”的方法是什么？

子菜单如下所示:

Answer 1

编辑2

另一个与菜单样式相关的现场演示:
https://stackblitz.com/edit/angular-ivy-zrzfuy

---

编辑

响应式(Reactive)表单现场演示: https://stackblitz.com/edit/angular-ivy-fhvvzs

---

这是如何执行此操作的示例。

文件.html

<select id="categoriesList" name="categoriesList" [ngModel]="categorySelected"
(ngModelChange)="setAnotherSelect(+$event)">
    <option value="-1"></option>
    <option *ngFor="let category of categories" value="{{ category.id }}">{{ category.name }}</option>
</select>

<select id="randomElementsList" name="randomElementsList" [ngModel]="randomElements" *ngIf="showRandomElements">
    <option value="-1"></option>
    <option *ngFor="let element of randomElements" value="{{ element.id }}">{{ element.name }}</option>
</select>

文件 model.ts

export interface ICategoryStructure
{
    id: number;
    name: string;
    description: string;
    blogIds: number[];
}

文件组件.ts

import { ICategoryStructure } from './myApp.model'

public categories: ICategoryStructure[] = [
    { id: 1, name: 'test1', description: 'description1', blogIds: [1, 2] },
    { id: 2, name: 'test2', description: 'description2', blogIds: [3, 4] },
    { id: 3, name: 'test3', description: 'description3', blogIds: [5, 6] },
  ];
  public categorySelected: number = -1;

  public randomElements: ICategoryStructure[] = [];
  public randomElementSelected: number = -1;
  public showRandomElements = false;

  public setAnotherSelect(numberId) {
    this.categorySelected = numberId;
    this.showRandomElements = true;
    this.randomElements = [];
    switch (numberId) {
        case 1:
            this.randomElements = [
              { id: 4, name: 'test4', description: 'description4', blogIds: [7, 8] },
              { id: 5, name: 'test5', description: 'description5', blogIds: [9, 10] },
              { id: 6, name: 'test6', description: 'description6', blogIds: [11, 12] },
            ];
            break;
        case 2:
            this.randomElements = [
              { id: 7, name: 'test7', description: 'description7', blogIds: [13, 14] },
              { id: 8, name: 'test8', description: 'description8', blogIds: [15, 16] },
              { id: 9, name: 'test9', description: 'description9', blogIds: [17, 18] },
            ];
            break;
        case 3:
            this.randomElements = [
              { id: 10, name: 'test10', description: 'description10', blogIds: [19, 20] },
              { id: 11, name: 'test11', description: 'description11', blogIds: [21, 22] },
              { id: 12, name: 'test12', description: 'description12', blogIds: [23, 24] },
            ];
            break;
        default:
            this.showRandomElements = false;
            break;
    }
  }

现场演示:
https://stackblitz.com/edit/angular-ivy-hzee7k