Динамическое меню в стиле аккордеона

Question

Я хочу создать меню выбора с опциями динамического аккордеонного стиля, такими же, как на картинке ниже:

или примерно так:

Мои данные выглядят так:

 let allowedShifts = [{
    category: "Days",
    name: "D"
},
{
    category: "Evenings",
    name: "E"
},
{
    category: "Nights",
    name: "N"
},
{
    category: "Days",
    name: "d"
},
{
    category: "Nights",
    name: "n"
}];

Я пытался реализовать то же самое, используя меню множественного выбора, но не смог отфильтровать данныеданные основаны на категории.Вот мой код для справки:

HTML:

<select multiple class="form-control" name="shifts" id="exampleSelect2" [(ngModel)]="allowedShifts">
<optgroup label="Days">
    <option [value]="shiftIcon.name" *ngRepeat="let shiftIcon in allowedShifts | filter: {category: 'Days'}">
        {{shiftIcon.name}}
    </option>
</optgroup>
<optgroup label="Evenings">
    <option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Evenings'}">
        {{shiftIcon.name}}
    </option>
</optgroup>
<optgroup label="Nights">
    <option [value]="shiftIcon.name" *ngFor="let shiftIcon in allowedShifts | filter: {category: 'Nights'}">
        {{shiftIcon.name}}
    </option>
</optgroup>

Answer 1

Ваш код представляет собой смесь Angular2 и AngularJS, они разные, я уверен, что вы можете узнать из ваших правок. В Angular2 нет ни ngRepeat, ни фильтрующего канала, я бы порекомендовал изменить структуру вашего массива allowShifts, я не знаю ваш вариант использования, поэтому не могу предложить один.
Пожалуйста, прочитайте больше об Angular, и, в частности, * ngFor, воспользуйтесь этим учебным пособием от команды Angular, чтобы быстро освоиться.
Для множественного выбора, как показано на втором рисунке, используйте Angular Material , довольно простой и выполняющий именно то, что вы хотите, также созданный командой Angular. Если вы новичок, вам понадобится пара часов, но оно того стоит.