angular - Angular 创建一个 SELECT 分组选项

Question

我现在正在做一个项目，该项目利用了有关选择的大量信息。有没有办法使用原生 Angular（5/6？）函数对这些信息进行分组？我尝试了 ng-select 组件，但表现不佳。

我的 ：

<div class="form-group">
  <label for="disbursementType" class="ng-required">Typ wypłaty</label>
  <select id="disbursementType" class="form-control"
          name="disbursementType" required [(ngModel)]="hero.power" #power="ngModel" >
    <option *ngFor="let disbursementTypeOption of disbursementTypeOptions" 
            [value]="disbursementTypeOption.key">{{disbursementTypeOption.title}}</option>
  </select>
</div>

这是我的类变量

disbursementTypeOptions = [
    {
        "key": 1,
        "title": "Przelew na konto",
        "group": "first",
    },
    {
        "key": 2,
        "title": "Czek Giro",
        "group": "second",
    },
];

标签： angular

Answer 1

您可以在组件内对分组对象进行切片、切块和数组，然后在 select 内使用optgroupwith optiontag

HTML

<select id="disbursementType" class="form-control"
      name="disbursementType" required [(ngModel)]="hero.power" #power="ngModel" >
  <optgroup [attr.label]="group.name" *ngFor="let group of groupedArray">
    <option *ngFor="let disbursementTypeOption of group.values" 
        [value]="disbursementTypeOption.key">
      {{disbursementTypeOption.title}}
    </option>
  </optgroup>
</select>

代码

unique: string[];
groupedArray: any[]
formatArray() {
    this.unique = [...new Set(this.disbursementTypeOptions.map(item => item.group))];
    this.groupedArray = unique.map(i => ({
      name: i,
      values: disbursementTypeOptions.filter(d => d.group === i)
    }))
}