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

在clrCheckbox上添加selectAll/deselectAll按钮可以通过以下步骤实现：

首先，确保你已经在前端开发中使用了clrCheckbox组件。clrCheckbox是一个基于Angular的UI组件库，用于创建复选框。
在clrCheckbox组件的父组件中，添加一个按钮或链接，用于触发selectAll/deselectAll操作。可以使用HTML的<button>或<a>标签来创建按钮或链接。
在按钮或链接的点击事件处理函数中，编写逻辑来实现selectAll/deselectAll操作。具体实现方式如下：
- 首先，获取clrCheckbox组件的所有子组件。可以使用Angular的ViewChild装饰器来获取clrCheckbox组件的实例。
- 然后，遍历所有的clrCheckbox子组件，并设置它们的选中状态。可以使用clrCheckbox组件的setChecked方法来设置选中状态。
- 如果要实现selectAll操作，将所有clrCheckbox子组件的选中状态设置为true；如果要实现deselectAll操作，将所有clrCheckbox子组件的选中状态设置为false。

在逻辑实现完成后，可以根据具体需求进行样式调整，以使selectAll/deselectAll按钮与clrCheckbox组件的样式保持一致。

以下是一个示例代码，演示如何在clrCheckbox上添加selectAll/deselectAll按钮：

<!-- 父组件的模板 -->
<button (click)="selectAll()">Select All</button>
<button (click)="deselectAll()">Deselect All</button>

<clr-checkbox *ngFor="let item of items" [(clrChecked)]="item.checked">
  {{ item.label }}
</clr-checkbox>

// 父组件的代码
import { Component, ViewChild } from '@angular/core';
import { ClrCheckbox } from '@clr/angular';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent {
  @ViewChild(ClrCheckbox) clrCheckbox: ClrCheckbox;
  items = [
    { label: 'Item 1', checked: false },
    { label: 'Item 2', checked: false },
    { label: 'Item 3', checked: false }
  ];

  selectAll() {
    this.items.forEach(item => item.checked = true);
  }

  deselectAll() {
    this.items.forEach(item => item.checked = false);
  }
}

在上述示例中，我们使用了Angular的ViewChild装饰器来获取clrCheckbox组件的实例。然后，通过遍历items数组来设置clrCheckbox子组件的选中状态。点击"Select All"按钮将会将所有clrCheckbox子组件选中，点击"Deselect All"按钮将会将所有clrCheckbox子组件取消选中。

请注意，这只是一个示例代码，具体实现方式可能因你所使用的前端框架或组件库而有所不同。你可以根据自己的需求和实际情况进行调整和修改。