angular - *ngFor 中的 Angular 复选框
问题描述
我将 KendoUI 与 Angular7 一起使用,并试图获取具有绑定检查状态的复选框的动态列表。这是此列表的基本 html:
<div *ngFor="let option of RoleOptions">
<input type="checkbox" class="k-checkbox" [(ngModel)]="option.Selected" style="width: auto">
<label class="dialogLabels k-checkbox-label">{{option.Role.Name}}</label>
</div>
这显示得很好,我得到了一个堆叠的复选框列表,其中包含标签中的各种名称,但我无法检查任何内容。我也有一些逻辑可以预先检查某些逻辑,我可以随意设置它,它会在出现时正确反映框的检查状态,但仍然不允许我更改它。
我上面也有这一行:
<input type="checkbox" class="k-checkbox" [(ngModel)]="NewUserSendEmail" id="cbEmail" style="width: auto">
<label class="dialogLabels k-checkbox-label" for="cbEmail"> Email login data to the user</label>
效果很好,让我绑定,让我检查等等。我只能看到 2 个差异。
首先,ngfor 中的那些没有要关联的标签或任何其他要查找的 id。但是,我没有发现任何需要 id 的内容,并且在 Kendo 页面上有很多示例显示了没有 id 的复选框的示例,所以我认为这不是问题(但肯定可能是错误的)。
其次,它们在 ngFor 循环中。我不知道为什么这会搞砸,但这就是我能想到的。我用谷歌搜索,但在这里找不到任何关于问题或如何解决它的信息。
有什么想法我会出错或我没有看到什么吗?我确实记录了它绑定的对象,并且值为真/假(不是空或未定义),所以这不应该是一个问题。不知道还能去哪里看...
编辑
经过一番研究,这绝对与剑道风格有关。如果我这样做:
<div *ngFor="let option of RoleOptions">
<label class="dialogLabels">
<input type="checkbox" [(ngModel)]="option.Selected" style="width: auto">
{{option.Role.Name}}</label>
</div>
它有效,但显然没有剑道的外观。如何获得与应用程序其余部分外观相同的动态复选框列表?
解决方案
NgModel 默认情况下不适用于复选框。
看看:Angular 2 Checkbox Two Way Data Binding
您可以将您的值绑定到 checked 并实现一个速记切换方法,如下所示:
<input
type="checkbox"
[checked]="option.Selected"
(change)="option.Selected = !option.Selected"/>
或者将 ngModel 与 ngmodeloptions 一起使用,如下所示:
<input
type="checkbox"
[(ngModel)]="option.Selected"
[ngModelOptions]="{standalone: true}"/>
推荐阅读
- c# - 访问 UIAlertView 的 ViewController
- python - Pyspark 安装错误:没有名为“pyspark”的模块
- json - CloudFormation - 如何使用 Sub 内在函数?
- php - Make table data multidimensional array
- arrays - xamarin 表单从图像控件获取字节数组
- c# - namespace "FileToSend" does not exist
- r - Interpretation of main effects when interaction is present in gam
- java - Firebase 实时数据库 - 在时间范围内获取数据
- python - Django Rest - FileUploadView - Unexpected data being added into an Uploaded File
- r - How to fix "Aesthetics must be either length 1 or the same as the data (55161)" for conditionally coloring histogtam?