我将 KendoUI 与 Angular7 一起使用,并试图获取具有绑定(bind)检查状态的动态复选框列表。这是此列表的基本 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>
这显示得很好,我得到了一个堆叠的复选框列表,标签中有各种名称,但我无法选中任何内容。我也有一些预先检查某些逻辑的逻辑,我可以随意设置它,当它出现时它会正确反射(reflect)框的检查状态,但仍然不允许我更改它。
我上面还有一行:
<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>
效果很好,让我绑定(bind),让我检查等等。我只能看到 2 个不同之处。
首先,ngfor 中的那些没有用于关联标签的 id 或任何其他可查找的 id。但是,我没有发现任何需要 ID 的内容,Kendo 页面上有很多示例显示了没有 ID 的复选框示例,所以我认为这不是问题所在(但肯定可能是错误的)。
其次,它们在 ngFor 循环中。我不知道为什么这会把事情搞砸,但这就是我能想到的。我四处搜索,但找不到任何关于这里的问题或如何解决它的信息。
有什么我哪里出错了或者我没看到什么的想法吗?我确实记录了它绑定(bind)到的对象并且值为 true/false(不是 null 或 undefined)所以这不应该成为问题。不确定还有什么地方可以看...
编辑
稍微研究了一下,这肯定与剑道风格有关。如果我这样做:
<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
您可以将您的值绑定(bind)到 checked 并实现如下所示的速记切换方法:
<input
type="checkbox"
[checked]="option.Selected"
(change)="option.Selected = !option.Selected"/>
或者像这样使用 ngModel 和 ngmodeloptions:
<input
type="checkbox"
[(ngModel)]="option.Selected"
[ngModelOptions]="{standalone: true}"/>
关于*ngFor 中的 Angular 复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61019291/