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",
    },
];

Answer 1

您可以对组件内部的对象进行切片，切块和排列，然后在select内将optgroup与option标签一起使用

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)
    }))
}

Answer 2

如果您不想添加lodash以使用groupBy，则可以使用rxjs（因为它已经附带了angular），如下所示。如果您有静态数据（为什么不将其排在第一位），则不是真正有用，但是对于异步数据则很有用。

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

let groups: { group: string, items: Item[] }[];

from(disbursementTypeOptions)
  .pipe(
    groupBy(v => v.group),
    mergeMap(group => group.pipe(toArray(), map(items => ({ group: group.key, items })))),
    toArray()
  )
  .subscribe(grouped => groups = grouped);

有角创建将选项分组的SELECT

2 个答案: