Angular无法选中复选框

时间:2018-01-12 09:54:04

标签: angular checkbox

您好我正在开发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>

每当有缺血的时候,我想要复选框。所以我将缺血性质设定为模型本身。目前尚未发生这种情况。

以下是我申请的样本数据。

[
   {
      "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
   }
]

有人可以帮助我做这件事吗?任何帮助,将不胜感激。谢谢

1 个答案:

答案 0 :(得分:2)

选中复选框并在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