Question

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

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

如何在Angular 2中创建select optgroup？

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

Answer 2

如果您使用的是AngularJ，则以下代码段可能对您有所帮助：

HTML示例代码

this.translate.onLangChange.subscribe

JavaScript示例代码

                <div class="col-md-6">
                    <select ng-model="selectedItem" class="form-control">
                        <optgroup label="{{currentGroup}}" ng-repeat="currentGroup in groupList">
                            <option ng-value="item.key" ng-repeat="item in items | orderBy:'name' | filter: {group: currentGroup}">
                                {{item.name}}
                            </option>
                        </optgroup>
                    </select>
                </div>

谢谢

在Angular 2

2 个答案: