Question

我在角度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

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

我搜索并发现有一个属性绑定

[checked] =＆＃34; somevariable＆＃34;

但问题是同一属性[已检查] =＆＃34;有些变量＆＃34;将添加所有复选框。结果是当我将somevariable指定为true时。它会标记所有复选框。

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

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

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

请帮帮我。任何线索或逻辑都与我的日子相同。

Answer 1

您可以修改对象以包含布尔\>属性（即checked），并在需要时动态更新相关属性。

然后你的标记就变成了

roleObj.checked = false

Answer 2

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

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

在你的.html中：

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

您应该记得在@NgModule中添加FormModule：

从＆＃39; @ angular / forms＆＃39;;

导入{FormsModule，ReactiveFormsModule}

@NgModule({
    imports: [
         FormsModule      
    ]

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

如何将复选框标记为已检入角4

3 个答案: