Angular 无法选中复选框

Posted 2023-02-22

【中文标题】Angular 无法选中复选框

【英文标题】：Angular unable to make checkbox checked

【发布时间】：2018-06-21 18:16:02

【问题描述】：

您好，我正在开发 angularjs 应用程序。我显示了复选框列表。我有以下代码。

 <div class="checkbox" id="checkboxes" style="display:block"   *ngFor="let rolename of roles; let i = index">
           <input type="checkbox"
           name="roles.rolename"
           value="rolename.roleid"
           [(ngModel)]="rolename.ischecked"/>
           rolename.rolename
           rolename.ischecked
  </div>

只要有 ischecked true 然后我想让复选框被选中。所以我将 ischecked 属性设置为自己建模。目前没有发生这种情况。

以下是我应用的示例数据。

[
   
      "roleid":"666c01aa-5272-40bc-a888-5edac9087aad",
      "ischecked":"false",
      "rolename":"Observer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   ,
   
      "roleid":"4df4bf2f-16b0-482a-84c1-7a646bbfcf71",
      "ischecked":"true",
      "rolename":"Operator",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   ,
   
      "roleid":"be2cc996-e3a6-4736-ad19-b794ff04581e",
      "ischecked":"false",
      "rolename":"Supervisor",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   ,
   
      "roleid":"6c0f9539-a7fb-4050-92a3-bc80975e1c7d",
      "ischecked":"false",
      "rolename":"ConfigureAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   ,
   
      "roleid":"46476a49-f315-4a56-ba90-e4ed6a24d0d5",
      "rolename":"Engineer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   ,
   
      "roleid":"77c5f7e6-5f80-47c5-a3f5-f4dba4af41d1",
      "ischecked":"false",
      "rolename":"SecurityAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   
]

有人可以帮我完成这项工作吗？任何帮助，将不胜感激。谢谢

【问题讨论】：

***.com/questions/38504449/…

谢谢，但我的情况不同。我有属性 ischecked 会给我们真/假。

是一样的，例子也返回true/false。只需设置 [checked]="rolename.ischecked"

好的，谢谢。我会试试看。但是必须为模型设置什么属性？

我将 ionic 与 一起使用，并且 ngModel 工作

【参考方案1】：

选中复选框并在 Angular 2+ 中进行双向绑定

<input type="checkbox" name="roles.rolename" value="rolename.roleid" [checked]="rolename.ischecked" (change)="rolename.ischecked = !rolename.ischecked" />

另请阅读这篇文章以获取更多选项： Angular 2 Checkbox Two Way Data Binding

【讨论】：

这很有魅力。我正在尝试从最近两天开始修复它。我花了将近2天的时间。谢谢米斯特蒂。

如果您正在制作移动应用程序，我建议您开始使用 Ionic Framework。它在 Angular 平台上运行，但它的结构更加简化，并带有许多预制的用户界面组件。并且你还可以将代码与标准 html 组件混合使用