【发布时间】:2020-04-06 16:25:39
【问题描述】:
我正在尝试在使用 Angular Material 在 HTML 中选中复选框时显示计数。
当用户点击一个复选框时,这个复选框被选中,编号为 1,而不是勾号或叉号。如果用户再次单击,则显示数字 2。你知道我怎样才能做到这一点吗?我在 Google 上没有找到任何使用 Angular 材料的示例...
谢谢
【问题讨论】:
我正在尝试在使用 Angular Material 在 HTML 中选中复选框时显示计数。
当用户点击一个复选框时,这个复选框被选中,编号为 1,而不是勾号或叉号。如果用户再次单击,则显示数字 2。你知道我怎样才能做到这一点吗?我在 Google 上没有找到任何使用 Angular 材料的示例...
谢谢
【问题讨论】:
这实际上只是一个带有用户界面的数字输入。
我将创建一个绑定到属性的隐藏数字输入。 “复选框”将显示数据绑定的属性值,并且还会在单击时增加值。
<div class="checkbox" [class.checked]="value > 0" (click)="value = value + 1">
<span *ngIf="value > 0">{{value}}</span>
<span *ngIf="!value"> </span>
</div>
<input type="number" hidden [(ngModel)]="value" />
我会将其创建为带有事件发射器的独立组件,以便您可以轻松地将多个实例放置在同一个组件中,但其实现超出了本问题的范围。
您可能还想阅读 Angular 表单 ControlValueAccessor,以便您可以将您的组件视为标准的反应式表单控件。
【讨论】: