角度动态手风琴样式复选框菜单

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也没有过滤器管道，我建议更改您的allowedShifts数组的结构，我不知道您的用例，因此我不建议这样做。
请阅读有关Angular的更多信息，特别是* ngFor，请使用Angular团队提供的tutorial，以使您快速步入正轨。
对于多选，如第二张图片所示，请使用Angular Material，它非常简单，并且可以完成您想要的操作，这也是由Angular团队创建的。 如果您是全新手，将花费您几个小时，但这是值得的。