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",
},
];
Когда вы говорите «не работает хорошо», вы имеете в виду, что приложение стало вялым, или вы говорите, что оно не выполняло то, что вы хотели? Что вы пытаетесь достичь?
Я имею в виду, что у него были некоторые конфликты с локальным CSS, поэтому я предпочитаю использовать собственное решение, если оно доступно. Я пытаюсь создать выборку с группами.
Ответы 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)
}))
}
Я думал об этом, но пытался избежать лишнего цикла. Видно, я не могу убежать от этого ... ну, я все равно собираюсь проверить это, спасибо!
Если вы не хотите добавлять 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);
Я обязательно попробую и этот. Спасибо!