Angular5中如何通过select/ngFor实现optgroup分组输出

嘿，我之前在Angular 5项目里正好实现过用<optgroup>做选项分组的功能，给你分享下正确的实现步骤，应该能帮你解决当前的问题！

首先你需要确保数据是分组嵌套格式的，每个分组包含组名和对应的选项列表，比如在组件的.ts文件里定义这样的数据：

// 组件类中的数据定义
groupedData = [
  {
    category: '前端框架',
    items: [
      { value: 'angular', label: 'Angular' },
      { value: 'react', label: 'React' },
      { value: 'vue', label: 'Vue' }
    ]
  },
  {
    category: '后端语言',
    items: [
      { value: 'node', label: 'Node.js' },
      { value: 'java', label: 'Java' },
      { value: 'python', label: 'Python' }
    ]
  }
];

// 如果需要双向绑定选中值，可以定义一个变量
selectedValue: string;

接下来在组件的.html模板里，用两层*ngFor循环：外层遍历分组，渲染<optgroup>；内层遍历每个分组下的选项，渲染<option>。代码如下：

<select [(ngModel)]="selectedValue" class="form-control">
  <!-- 外层循环：渲染每个选项组 -->
  <optgroup *ngFor="let group of groupedData" [label]="group.category">
    <!-- 内层循环：渲染当前组下的每个选项 -->
    <option *ngFor="let item of group.items" [value]="item.value">
      {{ item.label }}
    </option>
  </optgroup>
</select>

• 一定要给<optgroup>绑定[label]属性，这是HTML规定的optgroup必须的属性，用来显示分组标题
• 如果不需要双向绑定，去掉[(ngModel)]即可，只保留<select>标签和内部的循环
• 确保你的选项数据里，每个选项都有唯一的value（用于表单提交或逻辑判断）和显示用的label

如果之前你的写法有问题，大概率是数据结构没整理对，或者循环嵌套的层级错了（比如把optgroup放在option里面了），按照上面的方式调整应该就能正常显示分组效果啦！

内容的提问来源于stack exchange，提问作者j-p