Question

我想渲染分层选择。 select中的每个选项都可以有自己唯一的子选择。最终，我想要一些 like this 。

我有一个名为fieldSelect的类，它表示带有一系列选项的单个选择下拉列表：

[Microsoft.VisualBasic.Interaction]::AppActivate($proc.Id)
[System.Windows.Forms.SendKeys]::SendWait("~")

fieldOption类表示下拉列表中的单个选项。它包含值，文本和子项。子部分是另一个选择下拉列表（使其分层）。

export class fieldSelect {
    constructor(
        public options: Array<fieldOption>
    ){}
}

Here's the Angular mockup on git.

Answer 1

您需要递归使用select组件。重要的部分是：

定义与选项（和子项）
检查是否有要显示的内容
检测选择框更改，以便初始化默认的当前元素

这是一个可能的实现：

import {Component,Input} from 'angular2/core';
import {FieldSelect,FieldOption} from './data';

@Component({
  selector: 'sel',
  template: `
    <div class="root">
      <select *ngIf="options && options.length>0" (change)="onChange($event.target.value)">
        <option *ngFor="#option of options" [value]="option.value">{{option.text}}</option>
      </select>
      <sel *ngIf="currentOption" [options]="currentOption.children"></sel>
    </div>
  `,
  directives: [ SelectComponent ]
})
export class SelectComponent {
  @Input()
  options:FieldOption[];

  constructor() {
  }

  ngOnInit() {
    if (this.options && this.options.length > 0) {
      this.currentOption = this.options[0];
    } else {
      this.currentOption = null;
    }
  }

  onChange(opt) {
    let i = this.options.findIndex(elt => elt.value === opt);
    if (i >= 0) {
      this.currentOption = this.options[i];
    } else {
      this.currentOption = null;
    }
  }

  ngOnChanges() {
    if (this.options && this.options.length > 0) {
      this.currentOption = this.options[0];
    } else {
      this.currentOption = null;
    }
  }
}

然后您可以导入此组件并将其用于另一个组件，如下所述：

import {Component,Input} from 'angular2/core';
import {FieldSelect,FieldOption} from './data';
import {SelectComponent} from './custom.select';

@Component({
  selector: 'my-app',
  template: `
    <sel [options]="select.options"></sel>
  `,
  directives: [ SelectComponent ]
})
export class AppComponent {
  constructor() {
    var options = [
      (...)
    ];
    this.select = new FieldSelect(options);
  }
}

我使用了这种数据结构：

var options = [
  {
    text:'Temperature',
    value: 'temperature',
    children: [
      { 
        text: 'Single test',
        value: 'singlke-test',
        children: [
          { 
            text: 'Degas arrive',
            value: 'degas-arrive',
            children: [
            ]
          }
        ]
      }
    ]
  },
  {
    text:'Temperature1',
    value: 'temperature1',
    children: [
      { text: 'Single test1',
        value: 'singlke-test1',
        children: [
        ]
      }
    ]
  }
];

有关详细信息，请参阅此plunkr：https://plnkr.co/edit/VutmZOpbNd15TxJnBqpE?p=preview

希望它可以帮到你，亨利

Angular 2中的分层选择

1 个答案: