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

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团队创建的。如果你是全新的，会花几个小时的时间，但值得花时间。