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

Question

我试图创建一个负责呈现select表单控件的Angular 2组件，并且在尝试使其支持optgroup时遇到了一些麻烦。

渲染时，我需要能够在optgroup和option元素之间切换，具体取决于项目是否有子项。我试图使用template标记来迭代这些项目，但它看起来像在select内不受支持。我也尝试在相同的元素上添加*ngIf和*ngFor，但不支持。

如何在Angular 2中使用optgroup创建select？

---

Plunkr demo

形状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); 
    } 
} 

app.ts

//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') 
     ]), 
    ]; 
} 

Answer 1

尝试以下操作：

<ng-template ngFor let-item [ngForOf]="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> 
</ng-template> 

Plunker

语法ngFor：

<li *ngFor="let item of items; let i = index">...</li> 
<li template="ngFor let item of items; let i = index">...</li> 
<ng-template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li></ng-template> 

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html#!#syntax