具有唯一选择的材料复选框

Posted 2023-03-05

【中文标题】具有唯一选择的材料复选框

【英文标题】：Material CheckBox with UNIQUE selection

【发布时间】：2018-03-31 16:29:54

【问题描述】：

在我的 angular2+bootstrap+material 项目中，我在这个问题上苦苦挣扎了 2 天。

我需要更改材料设计复选框：

当我从我的表格中选中一个复选框时，该复选框必须是唯一的一个

我知道我可以使用材质单选按钮，但在这种情况下我还有另一个问题：我无法取消选中单选按钮。

所以我需要启用唯一检查以及检查/取消检查功能。

我尝试了以下方法

通过 document.getElement.blablabla 与 dom 交互 使用了角度 2 的 dom 插值 javascript 函数 jQuery 函数

这是html的代码：

<div class="row">
<div class="col-lg-12">
    <label>Ordini cliente</label>
    <mat-table #table [dataSource]="dataSource">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Select Column -->
        <ng-container matColumnDef="Select">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let item"><mat-checkbox color="primary"></mat-checkbox></mat-cell>
        </ng-container>


        //OTHER COLUMNS ...

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>


</div>

我的想法是将元素绑定到这样的点击事件

<mat-cell *matCellDef="let item"><mat-checkbox (click)="foo()" color="primary"></mat-checkbox></mat-cell>

【参考方案1】：

设置一个属性来跟踪哪个被选中。然后只为被选中的那个设置[checked]。例如，这里我使用 ngFor 索引来跟踪：

<div *ngFor="let item of [1,2,3];  let i = index">
  <mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>

DEMO

【讨论】：

工作，非常感谢。 ps：我决定使用普通的 html 5 表，然后实现样式，因为在材料表中我们没有明确的 ngFor sintax 来适应我们的逻辑。

我如何为具有多个选项的同一个 ngmodel 使用绑定

这会抛出Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

@B45i，你能提供一个演示吗？它与您的代码有关，并且可能由于多种原因导致该错误

简单明了，像魅力一样工作！非常感谢。