Angular создание select с группировкой параметров

Я сейчас работаю над проектом, в котором используется много информации о выбирает. Есть ли способ сгруппировать эту информацию с помощью собственных функций 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",
    },
];

Когда вы говорите «не работает хорошо», вы имеете в виду, что приложение стало вялым, или вы говорите, что оно не выполняло то, что вы хотели? Что вы пытаетесь достичь?

georgeawg 10.08.2018 15:58

Я имею в виду, что у него были некоторые конфликты с локальным CSS, поэтому я предпочитаю использовать собственное решение, если оно доступно. Я пытаюсь создать выборку с группами.

Rafael 10.08.2018 16:02
1
3
1 359
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете нарезать и нарезать кубиками и массивом для сгруппированного объекта внутри вашего компонента, а затем использовать optgroup с тегом option внутри select

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

Я думал об этом, но пытался избежать лишнего цикла. Видно, я не могу убежать от этого ... ну, я все равно собираюсь проверить это, спасибо!

Rafael 10.08.2018 16:08

Если вы не хотите добавлять 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);

Я обязательно попробую и этот. Спасибо!

Rafael 10.08.2018 21:48

Другие вопросы по теме