角度的动态手风琴风格复选框菜单答案

【问题标题】：Dynamic accordion style checkbox menu in angular角度的动态手风琴风格复选框菜单
【发布时间】：2019-09-16 18:35:36
【问题描述】：

我想创建一个带有动态手风琴风格复选框选项的选择菜单，如下图所示：

或者像这样：

我的数据如下所示：

 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>

【问题讨论】：

这是 angular 还是 angularJS？什么是 *ngRepeat？它是 *ngFor 用于 angular 或 ng-repeat 用于 angularJS。
对不起，我是 Angular 的新手，我之前使用 ngRepeat 和管道过滤器和 angularJS 一起使用，所以不知道它不能和这个一起使用。

标签： angular typescript checkbox multi-select optgroup

【解决方案1】：

您的代码是 Angular2 和 AngularJS 的混合体，我敢打赌，您可以从您的编辑中看出它们是不同的。 Angular2 中没有 ngRepeat 或过滤器管道，我建议更改 allowedShifts 数组的结构，我不知道你的用例，所以我不能推荐一个。
请阅读有关 Angular 的更多信息，特别是 *ngFor，使用来自 Angular 团队的 tutorial，会让您快速进入正轨。
对于多选，如第二张图片所示，使用Angular Material，非常简单，完全符合您的要求，也是由 Angular 团队创建的。如果您是新手，可能需要几个小时，但值得花时间。

【讨论】：