如何在角度中设置动态级联下拉菜单的值？

<select [(ngModel)]="selectedCategory" (change)="onCategoryChange()">
  <option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</option>
</select>

<select [(ngModel)]="selectedSubcategory">
  <option *ngFor="let subcategory of subcategories" [value]="subcategory.id">{{ subcategory.name }}</option>
</select>

selectedCategory: number;
selectedSubcategory: number;
categories: any[];
subcategories: any[];

onCategoryChange() {
  // 根据选中的category，获取对应的subcategories
  this.subcategories = this.getSubcategoriesByCategory(this.selectedCategory);
}

getSubcategoriesByCategory(categoryId: number): any[] {
  // 根据categoryId获取对应的subcategories
  // 例如，假设categories和subcategories的数据结构如下：
  const data = [
    {
      id: 1,
      name: 'Category 1',
      subcategories: [
        { id: 1, name: 'Subcategory 1-1' },
        { id: 2, name: 'Subcategory 1-2' }
      ]
    },
    {
      id: 2,
      name: 'Category 2',
      subcategories: [
        { id: 3, name: 'Subcategory 2-1' },
        { id: 4, name: 'Subcategory 2-2' }
      ]
    }
  ];

  const category = data.find(item => item.id === categoryId);
  return category ? category.subcategories : [];
}