如何动态设置Clr-Datagrid的单选/多选可选中状态？

我刚好做过类似的需求，这就给你一步步拆解怎么实现基于输入参数动态切换Clarity Datagrid单选/多选的功能：

1. 组件类定义输入参数与状态变量 #

首先在你的my-clr-list组件类中，添加控制单选/多选的输入参数，同时分别维护单选和多选的选中状态变量：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from './path-to-your-user-model'; // 替换成你的用户模型路径

@Component({
  selector: 'my-clr-list',
  templateUrl: './my-clr-list.component.html'
})
export class MyClrListComponent {
  @Input() users$: Observable<User[]>;
  // 输入参数：true=单选模式，false=多选模式，默认设为多选
  @Input() set isSingleSelect(value: boolean) {
    this._isSingleSelect = value;
    // 切换模式时清空另一模式的选中状态，避免残留
    if (value) {
      this.selectedUsers = [];
    } else {
      this.selectedUser = undefined;
    }
  }
  get isSingleSelect(): boolean {
    return this._isSingleSelect;
  }
  private _isSingleSelect = false;

  // 单选选中项
  selectedUser: User;
  @Output() selectedUserChange = new EventEmitter<User>();
  // 多选选中项数组
  selectedUsers: User[] = [];
  @Output() selectedUsersChange = new EventEmitter<User[]>();
}

2. 模板中动态绑定单选/多选指令 #

在模板里，我们通过条件判断来激活对应的Clarity选中指令，同时动态控制选择列的显示：

<clr-datagrid 
  <!-- 单选模式绑定单选指令，多选模式绑定多选指令 -->
  [(clrDgSingleSelected)]="isSingleSelect ? selectedUser : undefined"
  (clrDgSingleSelectedChange)="selectedUserChange.emit($event)"
  [(clrDgSelected)]="isSingleSelect ? undefined : selectedUsers"
  (clrDgSelectedChange)="selectedUsersChange.emit($event)"
>
  <!-- 多选模式显示选择列，单选模式隐藏 -->
  <clr-dg-column *ngIf="!isSingleSelect">选择</clr-dg-column>

  <!-- 你的自定义列定义 -->
  <clr-dg-column>用户名</clr-dg-column>
  <clr-dg-column>邮箱</clr-dg-column>
  <!-- ...其他业务列 -->

  <clr-dg-row *clrDgItems="let user of users$ | async"
              [clrDgItem]="user">
    <!-- 多选模式显示复选框 -->
    <clr-dg-cell *ngIf="!isSingleSelect">
      <clr-checkbox [(clrChecked)]="user._selected"></clr-checkbox>
    </clr-dg-cell>

    <!-- 你的自定义单元格内容 -->
    <clr-dg-cell>{{user.name}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <!-- ...其他业务单元格 -->

    <clr-dg-action-overflow>
      <button class="action-item">编辑</button>
      <button class="action-item">删除</button>
    </clr-dg-action-overflow>
  </clr-dg-row>

  <clr-dg-footer>
    {{(users$ | async)?.length}} 条记录
    <!-- 可选：显示当前选中状态 -->
    <span *ngIf="isSingleSelect && selectedUser" class="ml-2">已选中：{{selectedUser.name}}</span>
    <span *ngIf="!isSingleSelect && selectedUsers.length" class="ml-2">已选中 {{selectedUsers.length}} 条</span>
  </clr-dg-footer>
</clr-datagrid>

3. 父组件中使用动态切换 #

在父组件里，你只需要传入布尔值就能切换模式：

<!-- 单选模式 -->
<my-clr-list [users$]="users$" [isSingleSelect]="true" [(selectedUser)]="currentSelectedUser"></my-clr-list>

<!-- 多选模式 -->
<my-clr-list [users$]="users$" [isSingleSelect]="false" [(selectedUsers)]="currentSelectedUsers"></my-clr-list>

• 利用条件绑定让clrDgSingleSelected和clrDgSelected互斥生效，避免指令冲突
• 通过setter方法处理模式切换时的状态重置，防止选中状态残留
• 动态控制选择列的显示，让UI更贴合当前模式的交互逻辑
• 添加双向绑定输出，方便父组件获取选中结果

内容的提问来源于stack exchange，提问作者Soumyaditya Nanda