带ngFor的Angular 8中的多级下拉列表

options = [
  {
    name: '级别1',
    children: [
      { name: '选项1-1' },
      { name: '选项1-2' },
      { name: '选项1-3' }
    ]
  },
  {
    name: '级别2',
    children: [
      { name: '选项2-1' },
      { name: '选项2-2' },
      { name: '选项2-3' }
    ]
  },
  {
    name: '级别3',
    children: [
      { name: '选项3-1' },
      { name: '选项3-2' },
      { name: '选项3-3' }
    ]
  }
];

<select *ngFor="let level1Option of options" [(ngModel)]="selectedLevel1Option">
  <option *ngFor="let level2Option of level1Option.children" [value]="level2Option.name">
    {{ level2Option.name }}
  </option>
</select>

selectedLevel1Option: string;
selectedLevel2Option: string;

onLevel1OptionChange() {
  // 根据选中的级别1选项更新级别2选项
  const selectedOption = this.options.find(option => option.name === this.selectedLevel1Option);
  this.selectedLevel2Option = null; // 重置级别2选项
  if (selectedOption) {
    this.selectedLevel2Option = selectedOption.children[0].name; // 默认选中第一个级别2选项
  }
}