首页 文章

如何取消选中选中的复选框,Angular 2

提问于
浏览
0

我试图取消选中一个选中的复选框 . 我有一个带复选框的项目列表,所以当我点击复选框时,项目将被推送到数组,我将在另一个div中显示它 . 然后该div有一个删除按钮,所以当我删除该特定项目 . 该项目应该被删除,并且还将取消选中已检查的项目 . 我希望你明白我的意思 . 我很擅长英语 . 这是我的代码 .

the first div
          <tr *ngFor = "let item of rows">
              <td style ="text-align: center"><md-checkbox 
                 (change)="onChange(item, $event.checked)" [value] = "item" name = "checklist"></md-checkbox></td>
              <td> {{ item.disclosureNumber }}</td>
              <td> {{ item.title }}</td>
              <td><button md-icon-button (click)="openModal(item)"><i class="material-icons">find_in_page</i></button></td>
          </tr>

然后这是 (change) 事件将推送和删除数组上的项目

onChange(gridData: Array<any>, isChecked: boolean) {

    if(isChecked) {
      //push item if true
      this.FormArray.push(gridData);

    } else {
      //remove item if false
      let index = this.FormArray.indexOf(gridData);
      console.log(index);
      this.FormArray.splice(index, 1);
    }

然后在另一个div上显示所有 FormArray 数据

<tr *ngFor = "let item of FormArray">
         <td> {{ item.disclosureNumber }}</td>
         <td> {{ item.title }}</td>
         <td><button md-icon-button (click) = "removeItem(item)"><i class="material-icons">delete</i></button></td>
         </tr>

如果我单击它将删除的删除按钮它运行良好 FormArray

removeItem(item): void {

let pointer = this.FormArray.indexOf(item);
if (pointer > -1) {
  this.FormArray.splice(pointer, 1);
}

问题是,即使我从该FormArray中删除该项目,仍然会选中/选中之前选择的复选框 . 如何强制取消选中该复选框 . 请帮帮我谢谢 . PS新手 .

1 回答

  • 1

    尝试:

    <md-checkbox 
        name="checklist"
        [checked]="FormArray.indexOf(item) !== -1"
        [value]="item"
        (change)="onChange(item, $event.checked)">
    </md-checkbox>
    

相关问题