在Angular 2中选择支持optgroup的下拉组件

我正在尝试创建一个负责渲染select表单控件的Angular 2组件，但在尝试使其支持时遇到了一些麻烦optgroup。

渲染时，我需要能够根据项目是否有子项在optgroup和option元素之间进行切换。我正在尝试使用template标签来迭代这些项目，但是似乎不支持select。我也尝试在同一元素上添加*ngIf和*ngFor，但也不支持。

如何在Angular 2中创建selectwith optgroup？

Plunkr demo

form-select.component.js

import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle } from '@angular/common';

export class FormSelectOption {
    id: string;
    text: string;
    children: FormSelectOption[];

    constructor(id: string, text: string, children: FormSelectOption[]) {
        this.id = id;
        this.text = text;
        this.children = children;
    }
}

@Component({
    selector: 'form-select',
    template: `
    <select>
        <!-- WORKING -->
        <option *ngFor="let item of items" (click)="select(item.id)">{{item.text}}</option>

        <!-- NOT WORKING -->
        <!--<template *ngFor="let item of items">
            <optgroup *ngIf="item.children" label="{{item.text}}">
                <option *ngFor="let child of item.children" (click)="select(child.id)">{{child.text}}</option>
            </optgroup>
            <option *ngIf="!item.children" (click)="select(item.id)">{{item.text}}</option>
        </template>-->
    </select>
  `
})
export class FormSelectComponent {
    @Input()
    items: FormSelectOption[];

    @Input()
    selectedValue: string[];

    @Output()
    valueChange: EventEmitter<any>;

    constructor(private elementRef: ElementRef) {
        this.valueChange = new EventEmitter<any>();
    }

    select(id) {
        this.valueChange.emit(id);
    }
}

应用程序

//our root app component
import {Component} from '@angular/core'
import {FormSelectComponent, FormSelectOption} from './form-select.component';

@Component({
    selector: 'my-app',
    template: `
        <form-select [items]="things" [selectedValue]="selectedThing"></form-select>
    `,
    directives: [FormSelectComponent],
})

export class App {
    selectedThing = '1';
    things = [
        new FormSelectOption('1', 'Fruit', [
            new FormSelectOption('2', 'Bananas'),
            new FormSelectOption('3', 'Apples'),
            new FormSelectOption('4', 'Oranges')
        ]),
        new FormSelectOption('5', 'Countries', [
            new FormSelectOption('6', 'England'),
            new FormSelectOption('7', 'New Zealand')
        ]),
        new FormSelectOption('8', 'Shapes', [
            new FormSelectOption('9', 'Square')
        ]),
    ];
}