如何在 clrCheckbox 顶部添加 selectAll/deselectAll 按钮？

Question

首先我不是前端开发者。也没有 javascript/html/angular 等方面的经验。这个问题可能很容易解决，但我找不到 proper/working 解决方案，因为我不知道问题所在。我正在尝试在复选框顶部添加已经工作的 "Select All" 和 "Deselect All" 按钮。但出于某种原因，它们要么没有显示，要么显示在底部，紧挨着已经存在的相同按钮。有人能告诉我我做错了什么吗？

<div class="widget form-group">

    <clr-checkbox-container>
        <label>
            {{schema.title}}
        </label>
        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>
        <clr-checkbox-wrapper *ngFor="let option of schema.items.oneOf"  class="checkbox">

            <input clrCheckbox [attr.name]="name"
                   value="{{option.enum[0]}}" type="checkbox"
                   [attr.disabled]="schema.readOnly"
                   (change)="onCheck($event.target)"
                   [checked]="checked[option.enum[0]] ? true : null"/>
            <label>{{option.description}}</label>
        </clr-checkbox-wrapper>
        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>

    </clr-checkbox-container>
</div>

我已经尝试 copy/paste 这部分到不同的地方，比如 monkey 和 ofc。结果不太好。

        <clr-control-helper>
            <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
            <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
        </clr-control-helper>

Answer 1

查看 docs for these checkbox containers 后，您对 clr-control-helper 指令的用法似乎不正确。该指令似乎是复选框下方某些文本的占位符，并且上面可能有一些 "css/js magic"。

我建议您在 clr-checkbox-container 上方插入一个新的 div，如下所示：

<div class="widget form-group">
    <div class="your-css-for-positioning">
     <button class="btn btn-sm" (click)="selectAll()" >Select All</button>
     <button class="btn btn-sm" (click)="deSelectAll()" >Deselect All</button>
    </div>
    <clr-checkbox-container>
        <label>
    ...

如何在 clrCheckbox 顶部添加 selectAll/deselectAll 按钮？

How to add selectAll/deselectAll buttons on top of clrCheckbox?

angular

vmware-clarity