如何在 angular 4 中将复选框标记为已选中

Question

我是 angular 的新手 2. 我需要在单击按钮时标记复选框。我在循环中有一些复选框，例如

 <tr *ngFor="let roleObj of roleNameList">
      <td>
         <input type="checkbox"   id ={{roleObj.roleID}} />
     </td>
     <td>{{roleObj.roleName}}</td>
  </tr>

我有一组选定的角色，只是我需要在单击编辑按钮时标记这些复选框。所以我在 javascript

中所做的一样

 document.getElementById("role").checked

但在 angular 4 中没有这样的属性。

我搜索了一下，发现

有一个属性绑定

[checked] ="somevariable"

但问题是一样的属性 [checked] ="somevariable" 将添加所有复选框。结果是当我将 somevariable 指定为 true 时。它将标记所有复选框。

我在 jquery 中有其他解决方案，例如

$(document.getElementById(role)).prop('checked', true);

但可能会造成问题，我不确定请指正。

请帮帮我。任何线索或逻辑都会和我一样。

Answer 1

你应该使用变量。在你的 .ts:

public checkboxValue: boolean;
constructor() {
  this.checkboxValue = false;
}

在你的.html中：

 <input type="checkbox" [(ngModel)]="checkboxValue"/>

你应该记得在你的@NgModule 中添加 FormModule:

从'@angular/forms'导入{FormsModule, ReactiveFormsModule};

@NgModule({
    imports: [
         FormsModule      
    ]

Answer 2

您可以修改您的对象以包含布尔值 checked 属性（即 roleObj.checked = false）并在需要时动态更新相关对象。

那么你的标记就变成了

<input type="checkbox" [checked]="roleObj.checked" id ={{roleObj.roleID}} />

Answer 3

您可以遵循这个简单的实现

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <ng-container *ngFor="let item of items">
    <input type="checkbox" 
    [checked]="selected === item.id " 
    [value]="item.id" 
    (change)="selected = item.id"
    [attr.id]="item.id"
    /> 
   <label [attr.for]="item.id"> {{ item.label }}</label>
  </ng-container>

  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    { id: 1, label: 'one' },
    { id: 2, label: 'two' },
    { id: 3, label: 'three' }
  ];

  selected = 1;
}

Live demo

如何在 angular 4 中将复选框标记为已选中

How to mark check box as a checked in angular 4

angular

angular4-forms