Angular 创建一个 SELECT 分组选项答案

【问题标题】：Angular creating a SELECT grouping the optionsAngular 创建一个 SELECT 分组选项
【发布时间】：2022-01-10 14:12:03
【问题描述】：

我现在正在开展一个项目，该项目利用了大量关于选择的信息。有没有办法使用原生 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",
    },
];

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
当你说“表现不佳”时，你的意思是应用程序变得迟缓还是你说它没有达到你想要的效果？你想完成什么？
我的意思是它与本地 css 有一些冲突，所以我宁愿使用原生解决方案，如果有的话。我正在尝试使用组创建选择。

标签： angular

【解决方案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)
    }))
}

【讨论】：

我曾考虑过这一点，但试图避免额外的循环。显然我无法逃避它......好吧，无论如何我都要测试它，谢谢！

【解决方案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);

【讨论】：

我也一定会试试这个。谢谢！